html, body {
	/* font-family: 'Roboto'; */
	font-family: 'Helvetica', serif;
	
	margin: 0;
	padding: 0;
	min-height: 100vh;
}

body:before {
	content: "";
	position: absolute;
	top: 0; 
	left: 0;
	width: 100%; 
	height: 100%;  
	opacity: 0.1; 
	z-index: -1;
	
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	background-size: 100% 100%;
}

body {
	position: relative;
	z-index: 1;
	
	font-size: 125%;
	line-height: 1.45;
	
	/* white-space: break-spaces; */
	overflow-wrap: break-word;
	
	color: #000;
}

a {
	text-decoration: none;
}

a:hover {
	border-bottom: 1px solid #000;
	/* color: #f001ac; */
}

a:visited {
	color: #000;
}

H1, H2, H5, strong {
	letter-spacing: 1.5px;
}

H1, H2, H3, H5, p, ul {
	margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

p {
	text-align: justify;
	width: 100%;
	overflow-wrap: break-word;
  hyphens: auto; 
}

h2 {
	padding: 1em 1em;
	text-align: center;
}

.hidden {
    display: none !important;
}

.center {
	text-align: center !important;
}

.left {
	text-align: left !important;
}

.right {
	text-align: right !important;
}

.justify {
	text-align: justify;
}

.disabled {
	background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3));
}

.wrapper {
	display: flex;
	flex-direction: column;
	/* flex: 1; */
	/* flex: 1 0 auto; */
	/* height: 100%; */
	/* min-height: 100%; */
	min-height: 100vh;
}

header {
	width: 100%;
	background-color: #FFFFFF;
	position: sticky;
	top: 0;
	z-index: 100;
}

header.on_scroll {
	height: 2.5em;
	max-height: 2.5em;
}

header.menu {
	height: auto;
	max-height: fit-content;
}

nav {
	font-family: 'Arial';
	font-size: 0.7em;
	padding: 0em 1em 0em 1em ;
	
	max-width: 900px;
	padding-left: 1em;
	overflow: hidden;
	margin: auto; 
}

nav ul {
	padding: 0.5em 0;
	display: flex;
	flex-wrap: wrap;
	align-items:center;
	justify-content: center;
	overflow: hidden;
    padding-inline-start: 0;

	list-style-type: none;
	/* text-align: center;  */
}

nav ul.on_scroll {
	flex-direction: row;
	flex-wrap: nowrap;
	white-space: nowrap;
	justify-content: left;
}

nav ul.menu {
	flex-direction: column;
	align-items: start;
}

nav ul li {
	padding: 0.5em 1.7em;
}

nav.menu li {
	display: block;
}

nav .humburger {
	float: left;
	/* float: right; */
	display: block;
	/* padding-right: 10px; */
	background-color: #EEEEEE;
	padding: 0.7em 0.75em 0.35em 0.75em; 
	margin-top: 0.5em;
	/* vertical-align: middle; */
	/* position: absolute; */
	/* left: calc(100vw - 120px); */
	/* top: 10px; */
}
nav .humburger img {
	width: 1.3em;
	height: 1.3em;
}

/* .page-content {
} */

.first.on_scroll {
	margin-top: 1.7em; 
}

.first {
	width: 100%;
	height: 650px;

	background: #FFFFFF;
	background-position: center;

	/* opacity: 0.99;  */
}

.first .left, .first .right {
	overflow: hidden;
	height: 620px;
	margin: 15px 0;
	
	background-repeat: no-repeat;
	background-size: auto 100%;
	/* background-position: center; */

	/* background-size: 100% 96%; */
}
.first .left {
	float: left;
	/* background-image: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 20%), url("http://localhost/user/pages/02.kd/02.ukr/odessa/6_2.jpg"); */
}
.first .right {
	float: right;
	/* background-image: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 20%), url("http://localhost/user/pages/02.kd/02.ukr/odessa/6_3.jpg"); */
}

.first .internal {
	position: relative;
	max-width: 900px;
	/* padding: 0.7em 1em;  */
	/* margin will be changed by JS later */
	margin: auto;
	height: 100%;
	
	/* display: flex; */
	/* flex-direction: column; */
		/* first item at start, last at end */
	/* justify-content: space-between;   */

				/* x  y	 blur */
	box-shadow: -5px 0px 5px 1px rgba(255,255,255,0.7), 5px 0px 4px 0px rgba(255,255,255,0.7);
	background-size: 100% 100%;
}

.first .internal #first_center {
	height: 100%;
	width: 100%;

	mask-image: linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 30%);
	-webkit-mask-image: linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 30%);
}

.first .over_image {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 1.3em;
	/* left: 50%; */
  	/* transform: translate(-50%, -50%); */
}

.first H1 {
	font-size: 4em;
	text-align: center;
	
	/* padding-top: 0.1em; */
	display: block;
	/* color: black;  */
}

.first H1, .first H2 {
					  /* x    y	 blur */
	text-shadow: 1px 0px 4px #FFF, -1px 0px 4px #FFF, 0px 1px 4px #FFF, 0px -1px 4px #FFF; 
	/* text-shadow: #000 1px 0px 4px, -1px 0px 4px #000, 0px 1px 4px #000, 0px -1px 4px #000;  */
}

.first H2 {
	text-align: center;
}

.first .info {
	text-align: center;
	position: absolute;
	bottom: 1.5em;
	left: 0px;
	padding-bottom: 1em;
	padding-left: 5.5em;
	padding-right: 5.5em;
}

.first p {
	text-indent: 1em;
	text-align: center;
	text-shadow: #FFF 2px 0px 14px, -2px 0px 14px #FFF, 0px 2px 14px #FFF, 0px -2px 14px #FFF; 
}

/* .first:after { */
	/* background: linear-gradient(to top, rgba(255,255,255,1) 50%,rgba(0,0,0,0) 100%); */
/* } */

.about, .travel, .diff {
	background: #FFF;
	padding: 1em 0; 
	/* margin-top: 0px;  */
	/* padding-top: 0px; */
}

.about .internal, .travel .internal, .diff .internal {
	max-width: 900px; 
	margin: auto;
	/* margin-top: 0px;  */
	/* padding-top: 0px; */
}

.about p, .archetypes .general p, .diving p, .diff p {
	text-indent: 1em;
	padding: 5px 0;
}

.archetypes {
	max-width: 900px;
	margin: auto;
	padding: 1em 0;
}

.archetype {
	padding: 1.5em 0; 
	width: 100%;
	clear: both;
	display: flex;
	flex-direction: row;
	align-items:center;
}

.archetype img {
	max-width: 50%;
	width: 50%;
	padding: 0 0.7em; 
	border-radius: 15%;
}

.archetype p {
	margin: 10px 0px; 
}

.archetype div { 
	vertical-align: middle;
}

.objectives {
	width: 100%;
	background: #FFF;
	padding: 1em 0;
}

.objectives .internal{
	max-width: 900px;
	margin: auto;
	
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.objectives .item {
	padding: 0.5em;
	flex: none;
	width: 29%;
	max-width: 100%;
	margin: 0 auto;
	
	text-align: center ;
}

.objectives .item p {
	text-align: center;
}

.objectives img {
	width: 100px;
	height: 100px;
}

.objectives, .diving, .travel, .reviews {
	padding-bottom: 2em;
}

.diving .internal {
	max-width: 900px;
	margin: auto;
}

.diving .first_stop {
	padding-left: 1em;
}

.diving .second_stop {
	padding-left: 2em;
}

.diving .third_stop {
	padding-left: 3em;
}

.diving h3 {
	font-size: 2em;
	margin: 0;
	text-align: center;
}

.diving .rock {
	display: flex;
    -ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	padding: 0.6em 0;
}

.diving .rock .rock_header {
	max-width: 11em;
	width: 11em;
	margin: auto 0;
	
	display: flex;
	flex-wrap: wrap;
}

.diving .rock .rock_header img {
	max-width: 8em;
	border-radius: 15%;
	margin: auto;
}

.diving .rock H3 {
	text-align: center;
	margin: auto;
}

.diving .rock p{
	text-indent: 0;
}

.diving p.center{
	text-indent: 0;
}



.travel .types {
	display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.travel .types .item {
	padding: 0.5em;
	flex: none;
	width: 44%;
	max-width: 100%;
	margin: 0 auto;
	text-align: center;
	
	vertical-align: top;
}

.travel img {
	width: 100px;
	height: 100px;
}

.travel .item p {
	text-align: center;
}

.noborder {
	font-size: 1em;

	border: 0;
	background-color: inherit;
	color: inherit;
	padding: 1px 1px;
}

.pointer {
	cursor: pointer;
}

.dotted-line {
	border-bottom: 1px dashed #FFF;
}

.btn-clipboard {
	font-size: 1em;

	border: 0;
	background-color: inherit;
	padding: 1px 1px;
	cursor: pointer;
	
	border-bottom: 1px dashed #000;
}

.travel .item .copy_img, .travel .item .external_link_img {
	width: 20px;
	height: 20px;
}

.my_map {
	width: 100%;
	max-width: 100%;
	height: 450px;
	max-height: 450px;
	background-color: #AAAAAA;
	overflow: hidden;
}

/* .diff {
} */

.reviews {
	width: 100%;
	background-color: #CCCCCC;
}

footer {
	width: 100%;
	background-color: #222222;
	padding: 1.5em 0; 
}

footer #contacts p {
	color: #FFF;
	font-size: 85%;
	text-align: center;
}
footer #contacts p a {
	color: #FFF;
	border-bottom: 1px solid #DDD;
	/* text-decoration: underline; */
}
/* footer #contacts p a:hover { */
	/* border-bottom: 1px solid #DDD; */
/* } */
footer #contacts p a:visited {
	color: #DDD;
}

footer #contacts #em {
	font-size: 1em;

	border: 0;
	background-color: inherit;
	padding: 1px 1px;
	cursor: pointer;

	color: #FFF;
	border-bottom: 1px dashed #FFF;
}


@media only screen and (max-width: 900px) {
    body {
        width: 100%;
		font-size: 95%;
   }
   
	body:before {
		background-size: 2000px 100%;
	}
	
	header {
		height: 2.5em;
		max-height: 2.5em;
	}
	
	nav {
		padding: 0;
		font-size: 0.8em;
		
		overflow: hidden;
	}
	
	nav .humburger {
		padding: 0.5em 0.65em 0.3em 0.65em; 
		margin-top: 0.4em;
		margin-left: 0.3em;
	}
	
	nav ul {
		flex-direction: row;
		flex-wrap: nowrap;
		white-space: nowrap;
		justify-content: left;
	}
	
	/* nav ul { */
		/* flex-direction: column; */
		/* align-items: start; */
		/* white-space: nowrap; */
		/* padding-left: 40px; */
	/* } */
	
	nav ul.on_scroll, nav ul.menu {
		padding-left: 0px;
	}

   
	.page-content {
		max-width: 100%;
	}

	.first {
		height: 400px;
	}
	.first .left, .first .right {
		overflow: hidden;
		height: 380px;
		margin: 10px 0;
	}

	.first .info {
		padding-left: 0.5em;
		padding-right: 0.5em;
	}
	
	.about .internal, .archetypes, .diving, .diff {
		padding: 1em 0.4em;
	}
	
	.archetype {
		flex-direction: column;
		margin: 10px 0px;
	}
	
	.archetype img {
		max-width: 100%;
		width: 95%;
	}
	
	.archetype h3 {
		text-align: center;
		padding-top: 1em;
	}
	
	.diving .first_stop {
		padding-left: 0.5em;
	}

	.diving .second_stop {
		padding-left: 1em;
	}

	.diving .third_stop {
		padding-left: 1.5em;
	}

	.diving .rock {
		flex-wrap: wrap;
	}
	
	.diving .rock .rock_header {
		max-width: 100%;
		width: 100%;
		margin: auto;
		
		display: flex;
		flex-wrap: nowrap;
	}
	.diving .rock .rock_header H3 {
		padding-left: 0 20px; 
		text-align: center;
	}
	
	.diving .rock .rock_header img {
		padding: 0 20px; 
		border-radius: 20%;
		margin: 0; 
	}
	
	.travel {
		padding-bottom: 1em;
	}
	
	.travel .internal .types {
		padding: 0px 20px 10px 20px; 
	}
	
	.travel .types .item {
		width: 100%;
		padding: 1em 0;
	}
}