html, body{
	padding: env(safe-area-inset);
	overflow-x: hidden;
}

#loading_layer{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index: 99999999;
}

#pixii_com_link{
	background-color: #505a61;
	height: 30px;
	padding: 0 1rem;
	position: fixed;
	width: 100%;
	z-index: 9999;
}

#pixii_com_link .container{
	max-width: var(--wp--style--global--wide-size);
    margin: auto;
	width: 100%;
	text-align: right;
	display: flex;
    align-items: center;
    justify-content: flex-end;	
	height: 100%;
}

#pixii_com_link .container a{
	color: white;
	text-decoration: none;
	font-size: var(--wp--preset--font-size--16-px);
	background-image: url(../images/general/pixii_link.svg);
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 20px;
    background-size: 14px;
}

#pixii_com_link .container a:hover{
	text-decoration: underline;
}


header{
	position: fixed;
    z-index: 10000;
    --top-value: var(--wp-admin--admin-bar--height, 0px);
    top: calc(var(--top-value) + 30px);
    height: 64px;
    width: 100%;
}

header > div{
	max-width: var(--wp--style--global--wide-size);
	margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	height: 100%;
}

header .logo{
	background-color: #000;
}

header .logo a{
	width: 135px;
	height: 64px;
	display: block;
	text-indent: -9999px;
	background-image: url("../images/header/logo.svg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 70%;
	transition: 0.2s; 
}


header .navigation{
	display: flex;
    flex-direction: row-reverse;
    align-items: center;
    background-color: #000;
}


header .navigation .menu{
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
	height: 100%;
}

header .navigation .menu li{
	display: flex;
    padding: 0 2em;
	position: relative;
}

header .navigation .menu .blue{
	background-color: var(--wp--preset--color--pixii-electric);
}

header .navigation .menu .blue a{
	color: var(--wp--preset--color--pixii-black);
}

header .navigation .menu a{
	font-size: var(--wp--preset--font-size--18-px);
	color: var(--wp--preset--color--pixii-white);
	text-decoration: none;
    align-self: center;
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    align-content: center;
	white-space: nowrap;
}

header .navigation .menu > li > a:hover{
	text-decoration: underline;
}

header .navigation #hamburger_menu_icon{
	display: none;
}

.hamburger {
    padding: 0;
}

.hamburger-box {
    width: 35px;
    height: 17px;
}

.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
    background-color: #fff;
	border-radius: 0;
	width: 35px;
    height: 3px;
}
.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner:after, .hamburger.is-active .hamburger-inner:before {
    background-color: #fff;
}

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

#wpadminbar{
	position: fixed !important;
}

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

@media only screen and (max-width: 1450px) {
	header {
		padding: 0 1rem;
	}
}


@media only screen and (max-width: 1200px){
	header .navigation .menu li {
		padding: 0 1.3em;
	}
	
	
}

@media only screen and (max-width: 980px){
	header .navigation .menu li {
		padding: 0 0.9em;
	}
	
	header .navigation .menu a {
		font-size: var(--wp--preset--font-size--16-px);
	}
}

@media only screen and (max-width: 800px){
	
	#pixii_com_link {
		height: 25px;
	}
	
	header {
		padding: 0;
		background-color: #000;
		top: calc(var(--top-value) + 25px);
	}
	
	header .logo {
		background-color: transparent;
	}
	
	header .navigation {
   		background-color: transparent;
	}
	
	header .navigation #hamburger_menu_icon {
		display: block;
		margin-right: 20px;
	}
	
	header .navigation .menu {
		display: none;
		/*display: table;*/
		position: absolute;
		top: 100%;
        flex-direction: column;
    	background-color: #000;
   		width: auto;
		height: auto;
	}
	
	header .navigation .menu li {
		padding: 0.5em 1.3em;
		justify-content: flex-end;
		border-top: 1px solid var(--wp--preset--color--pixii-gray);
	}
	
	header .navigation .menu a {
		font-size: var(--wp--preset--font-size--22-px);
	}
}

@media only screen and (min-width: 801px){
	header .navigation .menu{
		display: flex !important;
	}
	
}

/************** popup  *************/

div#popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0000009c;
    z-index: 10001;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}

div#popup  .container {
    background-color: white;
    width: 90%;
    max-width: 725px;
    padding: 2%;
	position: relative;
}

div#popup  .container > a{
	position: absolute;
    top: 5px;
    right: 5px;
    color: grey;
    text-decoration: none;
    width: 30px;
    height: 30px;
    text-align: center;
}


div#popup .popup_header {
    color: #008AFF;
    font-weight: 400;
    font-size: 22px;
}

div#popup .popup_content {
    color: #707070;
}

div#popup .popup_content p {
    margin-top: 30px;
    /* line-height: 130% !important; */
}

div#popup .popup_content a{
	color: inherit;
}

div#popup .popup_content ul{
	padding-left: 20px;
}

div#popup .btn {
    margin-top: 40px;
	text-align: center;
}

div#popup .btn a{
	color: #000 !important;
	background-color: #69FC46;
	padding: 3% 10% !important;
	cursor: pointer;
	text-transform: uppercase;
	font-weight: bold;
	text-decoration: none;
	display: inline-block;
}

@media only screen and (max-width: 600px)
{
	div#popup .btn a {
		padding: 7% 11% !important;
	}
	
	div#popup .container {
		padding: 10%;
	}
}

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