html { height: 100%; }
body { height: 100%; min-height: 100%; position: relative; box-sizing: border-box; 
font-family: 'Nunito', sans-serif; font-size: 13pt; 
}

*, *::before, *::after { box-sizing: border-box; }

.fn { height: 0px; clear: both; background: none; margin: 0px; padding: 0px;}

.nosel {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.coverable {
	background-size: cover; background-position: center center;
	-ms-behavior: url(../css/backgroundsize.min.htc);
}
.clickable { cursor: pointer; }

:root {
	--almost-white: #f0f5ee;
	--dark-blue: #27387f;
	--dark-teal: #23b5d3;
	--light-teal: #80d3d6;
	
	--accident-font: 'Marcellus', serif; 
	--normal-font: 'Nunito', sans-serif;
	--anim-func: cubic-bezier(0.68, 0.1, 0, 1);
	
	--trans-properties: all; /* color, border, fill, stroke, background, margin, bottom, font-size; */
}

/*html {
    scroll-behavior: smooth;
}*/

.animated {
	transition: 0.5s var(--anim-func); 
	transition-property: var(--trans-properties);	
}
.medium, .submenu-item::before {
	transition: all 0.25s var(--anim-func);
	transition-property: var(--trans-properties);
}
.quickly {
	transition: 0.1s linear; 
	transition-property: var(--trans-properties);
}

.rotated { transform: rotate(360deg); }

* { box-sizing: border-box; }

body { width: 100%; height: 100%; position: relative; padding: 0; margin: 0; color: black; }
.main-bg { position: fixed; width: 100vw; height: 100vh; z-index: 0; padding: 0; margin: 0; background: url(../img/bg.jpg) center center var(--almost-white) no-repeat; background-size: cover; }

h1, h2, h3 { font-family: var(--accident-font); line-height: 1.2em; color: var(--dark-blue); }
h1 { font-size: 36pt; }

a { color: var(--dark-blue); }
a:hover { color: var(--dark-blue); }

.cc { min-width: 320px; position: relative; }
.xc { max-width: 1620px; margin: 0 auto; }

.half-marker { position: fixed; top: 50%; width: 1px; border-top: 1px solid transparent; right: 0; z-index: 10000; }
.ui { z-index: 100; }

.top-nav { position: fixed; left: 22%; width: 35%; top: 5%; transform: translateY(-50%); height: 10%; padding: max(30px,3%) 0 0 0; display: flex; align-items: center; }
.main-logo { position: relative; width: 230px; flex-grow: 1; height: fit-content; }
.main-logo svg { width: 100%; max-width: 230px; display: block; fill: var(--dark-blue); margin-left: -10px; }

.main-text { position: fixed; left: 22%; top: 50%; width: 40%; max-width: 550px; transform: translateY(-50%); max-height: 80%; }
.main-text-header, .main-text-desc { position: relative; }
.main-text-header { margin-bottom: 1em; }
.main-text-header h1 { margin: 0; line-height: 1.25em; }
.main-text-desc { line-height: 1.5em; width: 90%; }

.slider { position: fixed; left: 5%; top: 50%; color: var(--dark-blue); font-family: var(--accident-font); transform: translateY(-50%); }
.slider-step { position: relative; height: 50px; }
.step-number-container { display: inline-flex; position: absolute; top: 0; left: 0; height: 100%; width: 50px; align-items: center; }
.step-number { position: relative; width: 100%; text-align: center; font-size: 0; left: 30px;}

.step-pointer-container { position: absolute; left: 70px; top: 10px; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; }
.step-pointer { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 5px; height: 5px; border-radius: 50%; background-color: var(--light-teal); z-index: 100; }
.step-circle-01 { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 1px; height: 1px; border-radius: 50%; background-color: var(--dark-teal); z-index: 99; }
.step-circle-02 { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 1px; height: 1px; border-radius: 50%; background-color: var(--light-teal); z-index: 98; }
.step-shadow { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 1px; height: 1px; background-color: white; border-radius: 50%; z-index: 97; opacity: 1; border: 1px solid white; }
.active .step-pointer { background-color: var(--dark-blue) }
.active .step-circle-01 { width: 9px; height: 9px; }
.active .step-circle-02 { width: 13px; height: 13px; }

.hov .step-pointer { background-color: var(--dark-blue); }
.hov .step-shadow { width: 30px; height: 30px; opacity: 0.5; background-color: transparent; border-color: var(--light-teal); }
.hov .step-number { font-size: 13pt; color: var(--light-teal); left: 0; }

.active .step-number { font-size: 13pt; left: 0; color: var(--dark-blue); }
.active .step-shadow { width: 30px; height: 30px; opacity: 0.5; animation: step-shadow-active 2s linear infinite }

@keyframes step-shadow-active {
  0%   { width:1px; height: 1px; opacity: 1; }
  90%  { width: 30px; height: 30px; opacity: 0.7; }
  100% { opacity: 0; }
}

@keyframes spinner-active {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.main-buttons { position: fixed; bottom: 10%; left: 22%; margin-left: -10px; z-index: 1000; }
.book-container { position: absolute; left: 0; bottom: 0; }
.social-container { width: max-content; display: flex; position: relative; align-self: center; gap: 10px; }
.button { position: relative; display: flex; align-items: center; border-radius: 500px; background-color: var(--dark-blue); height: 40px; color: white; font-size: 10pt; overflow: hidden; 
	border: 1px solid var(--dark-blue); cursor: pointer; }
.button-front { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; background-color: transparent; cursor: pointer; }
.button-desc { position: relative; padding: 3px 25px; z-index: 1; white-space: nowrap; }
.button-shape { position: absolute; top: 0; left: 0; width: 0; height: 0; opacity: 0; background-color: black; border-radius: 50%; z-index: 0;
	transition: all 0.5s var(--anim-func); transition-property: width, height, opacity; transform: translate(-50%,-50%); }
.button.hov { border-color: black; }
.button.hov .button-shape { width: 250%; height: 300px; opacity: 1; }

.social-container .button, .main-menu .button { display: flex; padding: 0 20px; background-color: transparent; fill: var(--dark-blue); position: relative; }
.social-container .button.hov, .main-menu .button.hov { fill: white; } 
.button-icon { psoition: relative; width: 20px; height: 20px; z-index: 1; }
.button-icon svg { width: 100%; height: 100%; }
.main-menu .buttons { width: fit-content; margin: 3em auto; display: flex; }

.send-button { display: inline-flex; margin-left: 10px; background-color: var(--dark-teal); border-color: var(--dark-teal); }

.page-holder { position: relative; z-index: 1; width: 100vw; height: 100vh; }
.half-screen { position: fixed; top: 50%; left: 0; }

.hw { white-space: nowrap; overflow: hidden; position: relative; display: inline-block; vertical-align: top; }
.hl, .scrolled-down .hl { transform: translateY(50%); display: inline-block; opacity: 0; transition: all .3s var(--anim-func); }
.shown .hl { transform: translateY(0); opacity: 1; }
.scrolled-up .hl { transform: translateY(-30%); opacity: 0; }
.shown { z-index: 105; }
.scrolled-up, .scrolled-down { z-index: 100; }

.vks-container { position: fixed; top: 50%; left: 75%; height: 75%; transform: translate(-50%,-50%); border-radius: 1000px; overflow: hidden; box-shadow: 15px 30px 50px 0 rgba(13,115,151,0.7);}
.vks { width: 100%; height: 100%; position: relative; }
.vks img { display: block; height: 100%; transition: all .5s var(--anim-func); }
.vks:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 15px solid white; opacity: 0.2; content: ' '; border-radius: 1000px; 
	transition: all .5s var(--anim-func);
}
.vks.hov:after { border-width: 20px; }
.vks.hov img { transform: scale(1.05); }

.main-text-desc .with-lines { position: absolute; top: 0; left: 0; }
.main-text-desc .origin { opacity: 0; }
.main-text-desc .line { display: inline-block; transform: translateY(200%); opacity: 0; transition: all .5s var(--anim-func); }
.shown .main-text-desc .line { opacity: 1; transform: translateY(0); }
.scrolled-up .main-text-desc .line, .main-text-desc.finished .line { opacity: 0; transform: translateY(-200%); }
.main-text-desc.hidden .line { display: inline-block; transform: translateY(200%); opacity: 0; transition: all .5s var(--anim-func); }

.main-text-desc + .main-text-desc { margin-top: 10px; color: #4f8fb9; maroon; font-weight: bold; }

.main-text-desc.raw { margin-top: 20px; margin-left: -20px; }
.main-text-desc.raw .line { display: block; margin-top: 10px; }
input, textarea { padding: 12px 60px 8px 70px; box-sizing: border-box; width: calc(100% + 20px); border: none; background-color: rgba(255,255,255,0.3); border-bottom: 1px solid var(--light-teal); 
	font-family: var(--normal-font); outline: none; font-size: 13pt; transition: all .3s var(--anim-func);
}
input:focus, textarea:focus { border-color: var(--dark-blue); background-color: rgba(255,255,255,0.7); }
textarea { resize: none; height: calc(3em + 60px); padding-left: 20px; padding-right: 20px; padding-top: 40px; }

.placeholder { font-size: 9pt; position: absolute; left: 20px; top: calc(50% + 1px); transform: translateY(-50%); }
textarea + .placeholder { top: 15px; transform: none; }

.book-container, .social-container { transition: all .5s var(--anim-func); }
.book-container.booking { margin-left: -100px; opacity: 0; }
.social-container.booking { /*left: -10px;*/ }

input.illegal { box-shadow: 0 0 5px maroon; border-color: maroon; }
input.illegal + .placeholder { color: maroon; }
input:disabled, textarea:disabled { color: #808080; }

.spinner { position: absolute; width: 150px; height: 150px; top: 50%; left: 50%; margin-top: -75px; margin-left: -75px; z-index: 5; 
	background: conic-gradient( var(--dark-teal) 50%, var(--light-teal)); animation: spinner-active 3s linear infinite; }
/*repeating-conic-gradient( var(--dark-teal) 0 15deg, var(--light-teal) 15deg 30deg)*/
	
.main-menu { position: fixed; top: 0; left: calc(-100% - 100px); background-color: white; z-index: 1001; height: 100%; width: 30%; min-width: 320px; box-shadow: 15px 0px 50px 0 rgba(13,115,151,0.7); 
	transition: all 500ms var(--anim-func); min-width: 450px; }
.main-menu.shown { left: 0; }
.main-menu .buttons { display: flex; gap: 10px; }
.main-menu .buttons .social { flex-grow: 0; }

.mi { font-family: var(--accident-font); max-width: 90%; margin: 0 auto; font-size: max(18pt,2vw); color: var(--dark-blue); padding: 1em; border-bottom: 1px solid rgba(128,211,214,0.5); line-height: 1em; 
	cursor: pointer; transition: all 500ms var(--anim-func); }
.mi:last-of-type { border-bottom: none; }
.buttons + .mi { border-top: 1px solid rgba(128,211,214,0.5); }
.main-menu .buttons .social { display: none; }
.mi:hover { background-color: var(--almost-white); color: var(--dark-teal); }
#btnMainMenu { background-color: var(--dark-teal); color: white; border-color: #0395b3; }
#btnMainMenu.hov { border-color: black; }

.main-text-desc.hidden { height: 0; }
	
@media only screen and (max-width: 1500px) {
	.top-nav, .main-text, .main-buttons { left: 17%; }
	.slider { left: 3%; }
	.vks-container { height: 70%; }
	.top-nav { width: 45%; }
}

@media only screen and (max-width: 1200px) {
	.main-text-header h1 { font-size: 30pt; }
	.main-text-desc { font-size: 12pt; }
	.main-text { width: 37%; }
	.top-nav { width: 50%; }	
}

@media only screen and (max-width: 1000px) {
	.step-pointer-container { left: 45px; }
	.active .step-number, .hov .step-number { font-size: 10pt; }
	.slider { left: 1%; top: 50%; transform: translateY(-50%);}
	.main-text-header { margin-bottom: 1em; }
	.main-text, .top-nav, .main-buttons { left: 15%; }

	.main-text { top: 50%; transform: translateY(-50%); }
	.main-buttons { bottom: 5%; }
	.main-text-header h1 { font-size: 25pt; }
	.main-text-desc { font-size: 11pt; }
	.main-text-desc.raw { margin-left: -10px; }
	input, textarea { font-size: 11pt; }
	.vks-container { height: auto; width: 35%; }
	.vks img { height: auto; width: 100%; }
	.vks:after { border-width: 5px; }
	.vks.hov:after { border-width: 10px; }
	.slider { left: 0; }
	.main-menu { width: 45%; }
}

@media only screen and (max-width: 900px) {
	.top-nav .social { display: none; }
	.main-menu .buttons .social { display: flex; }
	.main-menu .buttons { margin-left: 10%; margin-right: 10%; width: 80%; justify-content: space-between; }
}

@media only screen and (max-width: 700px) {
	.top-nav { width: 75%; }
}

@media only screen and (max-width: 580px) {
	.vks-container { display: none; }
	.main-text { left: 25%; width: 75%; }
	.main-text-header h1 { font-size: 20pt; }
	
	.main-buttons { bottom: 20px; }
	.slider { left: -10px; }
	.step-number-container { width: 30px; left: 15px; }
	.main-text-desc { line-height: 1.2em; }
	.button { height: 30px; }
	.social-container .button { padding: 0 15px; }
	.top-nav { width: 75%; }
	.main-logo { width: 100%; }
	.main-buttons { left: 50%; margin-left: 0; }
	.book-container { transform: translateX(-50%); }
	
	.main-menu { width: 100%; min-width: 320px; }
	.main-menu .buttons { margin-top: 1.5em; margin-bottom: 1.5em; }
	.mi { padding: 1em; }
}

@media only screen and (max-width: 360px) {

	.main-text-header h1 { font-size: 18pt; }	
	.main-text-desc { font-size: 10pt;  }	
	.step-number-container { left: 10px; }	
	.step-pointer-container { left: 35px; }

	.social-container .button-icon { width: 16px; height: 16px; }
}