@font-face {
	font-family: 'poiicons';
	font-weight: normal;
	font-style: normal;
	src: url('../fonts/poiicons/poiicons.eot');
	src: url('../fonts/poiicons/poiicons.eot?#iefix') format('embedded-opentype'), url('../fonts/poiicons/poiicons.woff') format('woff'), url('../fonts/poiicons/poiicons.ttf') format('truetype'), url('../fonts/poiicons/poiicons.svg#poiicons') format('svg');
}

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

.clearfix:before,
.clearfix:after {
	content: '';
	display: table;
}

.clearfix:after {
	clear: both;
}

body {
	font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #5d5c56;
	background: #fff;
	border: 10px solid #333;
 
  position: relative;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	text-decoration: none;
	color: #ffd444;
	outline: none;
}

a:hover,
a:focus {
	color: #33b996;
}
/*
P.S: Do you like this demo? You can help me to create new content for you by donating some money. https://www.paypal.me/melnik909/25USD

Also if you have a project and you would like to hire me, you can email me melnik909@ya.ru
*/

/*
=====
LEVEL DEPENDENCES
=====
*/

/* The component will reset button browser styles */

.r-button{
  --uirButtonBackgroundColor: var(--rButtonBackgroundColor, transparent);
  --uirButtonPadding: var(--rButtonPadding, var(--rButtonPaddingTop, 0) var(--rButtonPaddingRight, 0) var(--rButtonPaddingBottom, 0) var(--rButtonPaddingLeft, 0));
  --uirButtonBorderWidth: var(--rButtonBorderWidth, 0);
  --uirButtonBorderStyle: var(--rButtonBorderWidth, solid);
  --uirButtonBorderColor: var(--rButtonBorderColor, currentColor);
  --uirButtonFontFamily: var(--rButtonFontFamily, inherit);
  --uirButtonFontSize: var(--rButtonFontSize,  inherit);
  --uirButtonColor: var(--rButtonColor);

  background-color: var(--uirButtonBackgroundColor);
  padding: var(--uirButtonPadding);

  border-width: var(--uirButtonBorderWidth);
  border-style: var(--uirButtonBorderStyle);
  border-color: var(--uirButtonBorderColor);

  cursor: pointer;

  font-family: var(--uirButtonFontFamily);
  font-size: var(--uirButtonFontSize);
}

.r-button::-moz-focus-inner,
.r-button[type="button"]::-moz-focus-inner,
.r-button[type="reset"]::-moz-focus-inner,
.r-button[type="submit"]::-moz-focus-inner {
  
  /* Remove the inner border and padding in Firefox. */
  
  border-style: none;
  padding: 0;
}

/* The component will reset browser's styles of link */

.r-link{
    --uirLinkDisplay: var(--rLinkDisplay, inline-block);
    --uirLinkColor: var(--rLinkColor);
    --uirLinkTextDecoration: var(--rLinkTextDecoration, none);

    display: var(--uirLinkDisplay) !important;
    color: var(--uirLinkColor) !important;
    text-decoration: var(--uirLinkTextDecoration) !important;
}

/* The component will reset browser's styles of list */

.r-list{
    --uirListPaddingLeft: var(--rListPaddingLeft, 0);
    --uirListMarginTop: var(--rListMarginTop, 0);
    --uirListMarginBottom: var(--rListMarginBottom, 0);
    --uirListListStyle: var(--rListListStyle, none);

    padding-left: var(--uirListPaddingLeft) !important;
    margin-top: var(--uirListMarginTop) !important;
    margin-bottom: var(--uirListMarginBottom) !important;
    list-style: var(--uirListListStyle) !important;
}

/* Basic styles of the hamburger component */

.hamburger{
  --uiHamburgerDisplay: var(--hamburgerDisplay, inline-flex);
  --uiHamburgerWidth: var(--hamburgerWidth, 28px);
  --uiHamburgerHeight: var(--hamburgerHeight, 20px);
  --uiHamburgerThickness: var(--hamburgerThickness, 4px);
  --uiHamburgerBorderRadius: var(--hamburgerBorderRadius, 5px);
  --uiHamburgerBgColor: var(--hamburgerBgColor, currentColor);

  display: var(--uiHamburgerDisplay);
  width: var(--uiHamburgerWidth);
  height: var(--uiHamburgerHeight);

  position: relative;
  text-indent: -9999px;
}

.hamburger::before, 
.hamburger::after, 
.hamburger__label{
  width: 100%;
  height: var(--uiHamburgerThickness);
  border-radius: var(--uiHamburgerBorderRadius);
  background-color: var(--uiHamburgerBgColor);

  position: absolute;
  left: 0;
}

.hamburger::before, 
.hamburger::after{
  content:"";
}

.hamburger::before{
  top: 0;
}

.hamburger::after{
  bottom: 0;
}

.hamburger__label{
  top: calc(50% - calc(var(--uiHamburgerThickness) / 2));
}

/*
=====
LEVEL MENU STYLES
=====
*/

.menu{
  --uiMenuCircleSize: var(--menuCircleSize, 100px);
  --uiMenuCircleOffset: var(--menuCircleOffset, 10px);
  --uiMenuCircleBgColor: var(--menuCircleBgColor, currentColor);

  --hamburgerWidth: var(--menuHamburgerWidth, 28px);
  --hamburgerHeight: var(--menuHamburgerHeight, 20px);
  --hamburgerBgColor: var(--menuHamburgerBgColor, #fff);

  box-sizing: border-box;
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;  

  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9998;
}

.menu__nav{
  box-sizing: border-box;
  width: 100%;
  height: 0;

  transition: opacity .2s ease-out;
  opacity: 0;

  display: flex;
  align-items: flex-end;
  z-index: 2;
}

.menu__list{
  width: 100%;
  max-height: 100%;
  display: none;

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.menu__toggle{
  box-sizing: border-box;
  width: var(--uiMenuCircleSize);;
  height: calc(var(--uiMenuCircleSize) / 2);
  padding: var(--uiMenuCircleOffset);

  flex: none;

  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.menu__toggle::before{
  /*
  Для того,чтобы создать полукруг требуется скрыть сделать
  круг через border-radius: 50%; и скрыть половину через 
  position: absolute и bottom: -.5em;

  Если поддерживать Edge не нужно, то можно сделать полукруг через clip-path.
  */

  content: "";
  width: 1em;
  height: 1em;
  font-size: var(--uiMenuCircleSize);

  background-color: var(--uiMenuCircleBgColor);
  border-radius: 50%;

  position: absolute;
  bottom: -.5em;
  left: calc(50% - .5em);

  will-change: width, height;
  transition: transform .25s cubic-bezier(0.04, -0.1, 0.29, 0.98),
    width .25s cubic-bezier(0.04, -0.1, 0.29, 0.98),
    height .25s cubic-bezier(0.04, -0.1, 0.29, 0.98);
}

.menu__hamburger::before{
  /*
  Для увеличения области нажатия на кнопке
  */

  content: "";
  width: 100%;
  height: 100%;

  position: absolute;
  top: 0;
  left: 0;
}

/* styles of hamburger's animation */

.hamburger::before, 
.hamburger::after, 
.hamburger__label{
  transition-timing-function: ease;
  transition-duration: .15s;  
}

.hamburger::before, 
.hamburger::after{
  transition-property: transform;
}

.hamburger__label{
  transition-property: transform, opacity;
}

/*
=====
LEVEL MENU STATES
=====
*/

/* focused state */

.menu__hamburger:focus{
  outline: none;
}

/* activated state */

.menu_activated{
  height: 100%;
}

.menu_activated .menu__nav{
  height: 100%;
  opacity: 1;

  will-change: opacity;
  transition-duration: .2s;
  transition-delay: .3s;
}

.menu_activated .menu__toggle::before{
  width: 100vmax;
  height: 100vmax;
  transform: translate3d(-50vh, -50vh, 0) scale(5);
  transition-duration: 1s;
}

.menu_activated .menu__list{
  display: block;
}

.menu_activated .hamburger::before{
  top: 50%;
  transform: translate3d(0, -50%, 0) rotate(45deg);
}

.menu_activated .hamburger::after{
  transform: translate3d(0, -50%, 0) rotate(135deg);
  top: 50%;
}

.menu_activated .hamburger__label{
  transform: rotate(-45deg) translate3d(-.285em,-.3em, 0);
  opacity: 0;
}

/*
=====
LEVEL DEMO
=====
*/





.menu__group{
  --rLinkColor: var(--colorWhite);

  padding: .5rem 3rem; 
  font-size: 3.2rem;
  font-weight: 400;
  text-transform: uppercase;
}

/*
=====
LEVEL SETTINGS
=====
*/

:root{
  --colorWhite: #000;
  --colorMain: #ffd444;
  --rLinkColor: var(--colorMain);
  --menuCircleSize: 100px;
  --menuCircleBgColor: var(--colorMain);
  --menuHamburgerWidth: 28px;
  --menuHamburgerHeight: 20px;
  --menuHamburgerBgColor: var(--colorWhite);
}

.hidden {
	position: absolute;
	overflow: hidden;
	width: 0;
	height: 0;
	pointer-events: none;
}


/* Canvas container */

.container {
	position: fixed;
	z-index: -1;
	top: 0;
	left: 0;
}


/* Header */

.poi-header {
	position: relative;
	z-index: 1000;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	height: 100vh;
	min-height: 600px;
	padding: 2em 1em 4em;
	text-align: center;
	color: #fff;
	background: #181922 url(../img/EAST_COPERTINA.jpg) no-repeat center center;
	background-size: cover;
}

.poi-header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(24, 25, 34, 0.5);
}
.poi-header2 {
	position: relative;
	z-index: 1000;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	height: 100vh;
	min-height: 600px;
	padding: 2em 1em 4em;
	text-align: center;
	color: #fff;
	background: #181922 url(../img/FAR-EAST_COPERTINA.jpg) no-repeat center center;
	background-size: cover;
}

.poi-header2::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(24, 25, 34, 0.5);
}

.header-title {
	position: relative;
}

.header-title__main {
	font-family: Baskerville, 'Baskerville Old Face', 'Hoefler Text', Garamond, 'Times New Roman', serif;
	font-size: 3em;
	font-weight: 400;
	line-height: 1;
	margin: 0em 0 0.15em 0;
}

.header-title__part {
	font-family: Baskerville, 'Baskerville Old Face', 'Hoefler Text', Garamond, 'Times New Roman', serif;
	font-size: 0.85em;
	font-weight: 400;
	display: block;
	padding: 0.5em 0 2em;
	text-indent: 4px;
	letter-spacing: 4px;
	text-transform: uppercase;
}

.header-title__part::before,
.header-title__part::after {
	content: '\2014';
	padding: 0 0.5em;
}

.header-title__sub {
	font-size: 0.55em;
	font-weight: normal;
	display: block;
	max-width: 700px;
	margin: 0 auto;
	padding: 0.5em 0 1em;
	color: #d1d2d2;
}

.intro {
	font-family: Baskerville, 'Baskerville Old Face', 'Hoefler Text', Garamond, 'Times New Roman', serif;
	font-size: 2em;
	position: relative;
	z-index: 1000;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	height: 150vh;
	margin: 0 0 3em;
	padding: 3em;
	text-align: center;
	color: #fff;
	background: #181922;
}

.intro blockquote {
	max-width: 800px;
	margin: 0 auto;
}

.intro em {
	font-size: 1.5em;
}

.intro span {
	display: block;
	padding: 1em 0;
	color: #464b4b;
}


/* Top Navigation Style */

.poi-links {
	position: relative;
	display: inline-block;
	text-align: center;
	white-space: nowrap;
}

.poi-links::after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: 1px;
	height: 100%;
	background: rgba(255, 255, 255, 0.5);
	-webkit-transform: rotate3d(0, 0, 1, 22.5deg);
	transform: rotate3d(0, 0, 1, 22.5deg);
}

.poi-icon {
	display: inline-block;
	width: 1.5em;
	margin: 0.5em;
	padding: 0em 0;
	text-decoration: none;
}

.poi-icon span {
	display: none;
}

.poi-icon:before {
	font-family: 'poiicons';
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	line-height: 1;
	margin: 0 5px;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
	speak: none;
}

.poi-icon--drop:before {
	content: '\e001';
	color: #09c;
}

.poi-icon--prev:before {
	content: '\e004';
}


/* Demo links */

.poi-demos {
	margin: 2em 0 0;
}

.poi-demos a {
	display: inline-block;
	margin: 0 0.5em;
}

.poi-demos a.current-demo {
	color: #333;
}


/* Content */

.content {
	padding: 3em 0;
}


/* Related demos */

.content--related {
	position: relative;
	z-index: 1000;
	padding: 7em 2em;
	text-align: center;
	color: #000;
	background: #f7f7f7;
}

.info {
	font-size: 1.65em;
	padding: 0 0 4em;
}

.media-item {
	display: inline-block;
	padding: 1em;
	vertical-align: top;
	-webkit-transition: color 0.3s;
	transition: color 0.3s;
}

.media-item__img {
	max-width: 100%;
	opacity: 0.6;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.media-item:hover .media-item__img,
.media-item:focus .media-item__img {
	opacity: 1;
}

.media-item__title {
	font-size: 1em;
	margin: 0;
	padding: 0.5em;
}


/* Story */

.text {
	position: relative;
	z-index: 1000;
	padding: 5em 3em;
}

.text section {
	font-size: 1.25em;
	line-height: 1.7;
}

.text section h2 {
	font-size: 2.7em;
	font-weight: 400;
	margin: 0;
	text-align: left;
}

.text section:not(:first-child) h2 {
	padding: 2em 0 0 0;
}

.title-up {
	font-size: 0.365em;
	font-weight: bold;
	display: block;
	letter-spacing: 7px;
	text-transform: uppercase;
	color: #cecec5;
}

.title-down {
	font-family: Baskerville, 'Baskerville Old Face', 'Hoefler Text', Garamond, 'Times New Roman', serif;
	font-size: 1.35em;
	font-weight: 400;
	line-height: 0.9;
	display: block;
	padding: 0.15em 0 0.35em;
	color: #5f646c;
}

.text figure {
	margin: 1em 0 2em;
}

.text figure img {
	max-width: 100%;
}

.text figcaption {
	font-size: 0.85em;
	font-style: italic;
	padding: 1em 1.5em 0;
	text-align: center;
	color: #5f646c;
}

.text section p {
	font-size: 0.95em;
	margin: 0.5em 0 1.5em;
}

.text section p.text-intro {
	font-size: 1.3em;
	font-style: italic;
	line-height: 1.5;
	margin: 0.5em 0 1.25em;
	text-align: left;
	color: #9d9c95;
}

.text blockquote {
	font-family: Baskerville, 'Baskerville Old Face', 'Hoefler Text', Garamond, 'Times New Roman', serif;
	font-size: 2em;
	line-height: 1.5;
	position: relative;
	text-align: left;
	color: #939997;
}

.text blockquote::before {
	content: '\201C';
	font-size: 2.5em;
	font-style: italic;
	line-height: 1;
	position: absolute;
	top: -0.15em;
	right: 100%;
	margin: 0 0.075em 0 0;
	color: #f0f3f3;
}

.text blockquote span {
	font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 0.5em;
	white-space: nowrap;
	color: #cbcece;
}

.js-section {
	width: 50%;
	max-width: 700px;
}

.js-gallery {
	padding-top: 50px;
	padding-bottom: 50px;
}

.js-gallery-content {
	font-size: 0;
	text-align: center;
}

.js-gallery-content img {
	max-width: 100%;
	margin: 10px 0;
}

@media(max-width: 720px) {
	.header-title {
		font-size: 1.5em;
	}
	.intro {
		font-size: 1.25em;
		height: auto;
		padding: 1em;
	}
	.text {
		font-size: 0.85em;
		padding: 2em;
		text-align: justify;
	}
	.text section h2 {
		font-size: 1.85em;
	}
	.text blockquote {
		font-size: 1.45em;
	}
	.js-section {
		width: 100%;
		max-width: none;
	}
}
@media only screen and (max-width: 400px) {
	

.menu__group {
    --rLinkColor: var(--colorWhite);
    padding: .5rem 3rem;
    font-size: 27px;
    font-weight: 400;
    text-transform: uppercase;
}
	
}