@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600&subset=latin-ext");
* {
  box-sizing: border-box;
}

html, body {
  font-family: "Raleway", sans-serif;
  font-size: 16px;
}

@media screen and (max-width: 768px) {
  html, body {
    font-size: 12px;
  }
}
.container-window {
  background-color: #9191E9;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

.button-window {
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 300;
  text-transform: uppercase;
  display: inline-block;
  border-radius: 1.5rem;
  background-color: #fff;
  color: #9191E9;
  padding: 1rem 2rem;
}

.popup-window {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  width: 100vw;
  height: 100vh;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  overflow: hiden;
  transition: 0.64s ease-in-out;
  
}
.popup-inner-window {
  position: relative;
  bottom: -100vw;
  right: -100vh;
  display: flex;
  align-items: center;
  max-width: 600px;
  max-height: 600px;
  width: 60%;
  height: 80%;
  /*background-color: #fff;*/
  transform: rotate(32deg);
  transition: 0.64s ease-in-out;
  border-radius:0px;
  background-image:url('../landing-images/Main_bar_story.jpg');
  background-repeat:no-repeat;
  background-size:auto 100%;
  background-position: center center;

}
.popup__photo-window {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  width: 40%;
  height: 100%;
  overflow: hidden;
  border-radius:30px 0px 0px 30px;
  /*background-image:url(../gallery/5.png);
  background-size:cover;
  background-position:38% center;*/
}
.popup__photo-window img {
  width: auto;
  height: 100%;
}
.popup__text-window {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 4rem;
  /*background-image:url(../f/157036/1920x2413/21ae898e17/bg-texture2.jpg);*/
}
.popup__text-window h1 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 2rem;
  text-transform: uppercase;
  color: #0A0A0A;
}
.popup__text-window p {
  font-size: 0.875rem;
  color: #686868;
  line-height: 1.5;
}
.popup-window:target {
  visibility: visible;
  opacity: 1;
}
.popup-window:target .popup-inner-window {
  bottom: 0;
  right: 0;
  transform: rotate(0);
}
.popup__close-window {
  position: absolute;
  right: -2rem;
  top: -2rem;
  width: 6rem;
  height: 6rem;
  font-size: 2rem;
  font-weight: bold;
  border-radius: 100%;
  background-color: #FFF;
  z-index: 4;
  color: #000;
  line-height: 3rem;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  border:2px solid #000;
  background-image:url(../landing-images/numbering_ring.png);
  background-size:100% auto;
  background-position:center center;
  opacity:0.8;
}

.popup__close-window:hover {
	color: rgba(233,158,124, 0.8);
	/*border:2px solid rgba(233,158,124, 1);*/
	opacity:1;
	
}

.close_window_button{
background-image:url(../landing-images/21_close.png);
  background-size:65% 65%;
  background-repeat:no-repeat;
  background-position:center center;
  width:100%;
  height:100%;
}










/*************************************************/
/**************Mobile Menu NAV*******************/
:root {
  --screen-width: 100%;
  --screen-height: 100wh;
  --header-bg-color: #673AB7;
  --splash-bg-color: #368887;
}

.nav__toggle {
  display: inline-block;
  position: absolute;
  z-index: 10;
  padding: 0;
  border: 0;
  background: transparent;
  outline: 0;
  right: 15px;
  top: 0px;
  cursor: pointer;
  border-radius: 50%;
  transition: background-color 0.15s linear;
}
.nav__toggle:hover, .nav__toggle:focus {
  background-color: rgba(0, 0, 0, 0.5);
}
.nav__menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: var(--screen-height);
  position: relative;
  z-index: 5;
  visibility: hidden;
}

.menuicon {
  display: block;
  cursor: pointer;
  color: white;
  transform: rotate(0deg);
  transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
  
.menuicon__bar, .menuicon__circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
}
.menuicon__bar {
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  transition: transform 0.25s ease-in-out;
}
.menuicon__circle {
  transition: stroke-dashoffset 0.3s linear 0.1s;
  stroke-dashoffset: 144.513262038;
  stroke-dasharray: 144.513262038;
}

/*.nav:target > .splash::after,
.nav--open > .splash::after {
  transform: scale(1);
}
.nav:target .menuicon,
.nav--open .menuicon {
  color: white;
  transform: rotate(180deg);
}
.nav:target .menuicon__circle,
.nav--open .menuicon__circle {
  stroke-dashoffset: 0;
}
.nav:target .menuicon__bar:nth-child(1), .nav:target .menuicon__bar:nth-child(4),
.nav--open .menuicon__bar:nth-child(1),
.nav--open .menuicon__bar:nth-child(4) {
  opacity: 0;
}
.nav:target .menuicon__bar:nth-child(2),
.nav--open .menuicon__bar:nth-child(2) {
  transform: rotate(45deg);
}
.nav:target .menuicon__bar:nth-child(3),
.nav--open .menuicon__bar:nth-child(3) {
  transform: rotate(-45deg);
}
.nav:target .nav__menu,
.nav--open .nav__menu {
  visibility: visible;
}
.nav:target .nav__item,
.nav--open .nav__item {
  opacity: 1;
  transform: translateY(0);
}*/

/*************************************************/

.download_btn_link_mobile{
	width:240px;
	height:60px;
}

.popup__text-window{min-width:300px;}

#download_close_btn1,#download_close_btn2,#download_close_btn3{display:none;}

@media (max-width:1000px) or (max-height:820px)/* , (min-height:400px)*/{
	
	#popup-window, #popup-window-win, #popup-window-mac, #popup-window-android{
		opacity:0.97;
		background:#000;
	}
	
	#popup-window .popup-inner-window, #popup-window-win .popup-inner-window, #popup-window-mac .popup-inner-window, #popup-window-android .popup-inner-window{
		background-image:none;
		width:100%;
		height:100%;
	}
	
	#download_close_btn1,#download_close_btn2,#download_close_btn3{display:block;width:60px;height:60px;margin:50px 50px 0px 0px;}
	
	.pc_close_btn{display:none;}
	.download-text-title{font-size:25px;line-height:60px; margin:0px;padding:0px;color:#864A2C;}
	.download-game-info {line-height:60px;}
	.download_btn_link_mobile{width:150px;height:38px;font-size:1rem;}
	.download_btns_ul_mobile{line-height:inherit;}
}

@media (max-height:820px){
	#popup-window .download_popup .download-text-title{font-size:25px;line-height:30px; margin:0px;padding:0px;color:#864A2C;}
	#popup-window .download_popup .download-game-info {line-height:30px;}
	
	#popup-window-win  .download_popup .download-text-title, #popup-window-mac  .download_popup .download-text-title, #popup-window-android  .download_popup .download-text-title{
		font-size:25px;line-height:30px; margin:0px;padding:0px;color:#864A2C;
	}
	
	#popup-window-win  .download_popup .download-game-info, #popup-window-mac  .download_popup .download-game-info, #popup-window-android  .download_popup .download-game-info{
		line-height:30px;
	}
}

@media (max-width:500px) or (max-height:400px){
	.menu_mobile_element {font-size:35px;}
	.menu_mobile_element  {line-height:35px;}
}

@media (max-width:400px){
	.menu_mobile_element {font-size:25px;line-height:30px;}
}