/* CSS Document */
/*----- last up date 20220125 -----*/
#page{
	position: relative;
}

#page > header{width:100%; position:relative;}
#page > header h1 {
	width: 30%;
	max-width: 235px;
	position: absolute;
	top: 70px;
	left: 35px;
	z-index: 10;
}


#page > aside.widget-area {
	position: absolute;
	left: 0;
	top: 500px;
	width: 280px;
	text-align: center;
}
#page > aside.widget-area .widget_archive{}
#page > aside.widget-area .widget_archive h2 {
	color: #595454;
	position: relative;
}
#page > aside.widget-area .widget_archive h2::before {
	content: "";
	background: #595454;
	height: 1px;
	width: 50px;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	left: -9px;
}
#page > aside.widget-area .widget_archive nav ul{}
#page > aside.widget-area .widget_archive nav ul li{font-size:14px;}

#page > aside.widget-area .widget_archive nav ul li a {
	position: relative;
	padding: 0;
	cursor: pointer;
	color:#595454;
	font-size:14px;
}
#page > aside.widget-area .widget_archive nav ul li a:after {
	content: '';
	display: block;
	height: 1px;
	width: 0%;
	background: #595454;
	margin: 0 auto;
	transition: 0.4s;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
	right: 0;
}

#page > aside.widget-area .widget_archive nav ul li a:hover:after{width:calc(100%);}

#page > aside.widget-area .widget_custom_html div {
	width: 80px;
	margin: 100px auto;
}
#page > aside.widget-area .widget_custom_html div a img{transform: translate(0%, 0%);}
#page > aside.widget-area .widget_custom_html div a img:hover{transform: translate(0%, -20%);}

#page > .site-content {
	padding-top: 460px;
	margin-left: 185px;
	padding-bottom: 150px;
	background-position: center center;
    background-size: cover;
}
#page > .site-content nav{}
#page > .site-content nav ul {
	max-width: 1000px;
	margin: 0 10% 0 auto;
	width: 40%;
	flex-wrap: nowrap;
}

#page > .site-content nav ul li a,
#page > .site-content article .entry-content div.steats a{
	position: relative;
	display: block;
	padding: 0 30px;
	cursor: pointer;
	color:#595454;
}
#page > .site-content nav ul li a:after,
#page > .site-content article .entry-content div.steats a:after {
	content: '';
	display: block;
	height: 1px;
	width: 0%;
	background: #595454;
	margin: 0 auto;
	transition: 0.4s;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
	right: 0;
}

#page > .site-content nav ul li a:hover:after,
#page > .site-content article .entry-content div.steats a:hover:after{width:calc(100%);}

#page > .site-content article {
	width: 80%;
	max-width: 1200px;
	margin: 20px auto 20px;
	background: rgba(255,255,255,.7);
	padding: 40px;
}

#page .navigation .nav-links {
	display: flex;
	width: 100%;
	justify-content: flex-end;
	max-width: 1200px;
	margin: 0 auto;
	width: 80%;
}

#page .navigation .nav-links > * {
	margin: 0 2%;
	position: relative;
	cursor: pointer;
}
#page .navigation .nav-links > *:after {
	content: '';
	display: block;
	height: 1px;
	width: 0%;
	background: #595454;
	margin: 0 auto;
	transition: 0.4s;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
	right: 0;
}

#page .navigation .nav-links > *:hover:after{width:calc(100%);}

#page .navigation .nav-links svg.svg-icon {
	position: absolute;
	top: 0;
	bottom: 0;
	left:-30px;
	margin: auto;
}


#page .navigation .nav-links span + .svg-icon {
	left:initial;
	right:-30px;
	}

#page > .site-content article header h1 {
	font-size: 30px;
	color: #595454;
	margin-bottom: 35px;
}
	
#page > .site-content article .entry-content p{
	font-size:15px;
	line-height:1.8;
	}

#page > .site-content article .entry-content p img{width:auto; height:auto;}

#page > .site-content article .entry-content p + p{margin-top:20px;}

#page > .site-content article .entry-content div.steats{
	width: 40%;
	margin: min(3vw , 30px) 0 min(3vw , 30px) auto;
}

#page > .site-content article footer{text-align:right;}

#page > footer {
	position: absolute;
	bottom: 0;
	right: 40px;
}

#page > .site-content header h1.page-title {
	font-size: 20px;
	text-align: right;
	padding-right: 12%;
}

#page > .site-content header h1.page-title span{font-size: 18px;}

@media only screen and (min-width:1000px){

#page > header > div.menu {display:none;}

}

@media only screen and (max-width:1500px){
	
#page > .site-content nav ul {
	max-width: 1000px;
	margin: 0 10% 0 auto;
	width: 70%;
	flex-wrap: nowrap;
}
}


@media only screen and (max-width:1000px){
#page {
	position: relative;
	overflow: hidden;
}
#page > header h1 {
	width: 30%;
	max-width: 235px;
	position: absolute;
	top: 2vw;
	left: -2vw;
	z-index: 11;
}

#page > header > div.menu {
	width: 10vw;
	height: 10vw;
	left: 87vw;
	padding: 1vw 1vw;
	position: fixed;
	background: rgba(255,255,255,.8);
	z-index: 10;
}

#page > header > div.menu #menuButton {
	overflow: hidden;
	display: block;
	position: relative;
	z-index: 0;
	width: 100%;
	height: 8vw;
	cursor: pointer;
}

#page > header > div.menu #menuButton span,
#page > header > div.menu #menuButton:before,
#page > header > div.menu #menuButton:after{
	display: block;
	position: absolute;
	top:0;
	bottom: 0;
	left:0;
	right: 0;
	width: 100%;
	height: 2px;
	margin: auto;
	background: #000;
	-webkit-transition: .1s ease-in-out;
	 transition: all 1s;
}

#page > header > div.menu #menuButton span{
	overflow: hidden;
	z-index: 1;
	color: #fff;
}

#page > header > div.menu #menuButton:before{
	z-index: 2;
	transform:rotate(0deg);
	top:5vw;
	content: "";
}

#page > header > div.menu #menuButton:after{
	z-index: 2;
	transform:rotate(0deg);
	top:-5vw;
	content: "";
}

#page > header > div.menu #menuButton span{
	transform:rotate(0deg) translateX(0px);
}

#page > header > div.menu #menuButton:before,
#page > header > div.menu #menuButton:after{
	transition: transform 500ms;
}

#page > header > div.menu.active #menuButton span{
	transform:translateX(-100px);
	top:0;
}

#page > header > div.menu.active #menuButton:before{
	transform:rotate(495deg);
	top:0;
}

#page > header > div.menu.active #menuButton:after{
	transform:rotate(405deg);
	top:0;
}


#page > aside.widget-area {
	position: fixed;
	left: -110vw;
	top: 25vw;
	width: 100%;
	text-align: center;
	background: #fff;
	height: 100vh;
	 transition: all 1s;
	z-index: 10;
}
.open #page > aside.widget-area {
	left: 0;
}

#page > aside.widget-area .widget_custom_html div {
	width: 10vw;
	margin: auto;
	position: absolute;
	top: 5vw;
	right: 5vw;
}

#page > .site-content nav ul {
	width: 100%;
	margin: 0;
	position: fixed;
	right: -110vw;
	top: 48vw;
	transition: all 1s;
	z-index: 10;
}

.open #page > .site-content nav ul {right:0;}

#page > .site-content nav ul li {
	width: 30%;
	line-height: 5vw;
}

#page > .site-content nav ul li a {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	text-align: center;
	font-size: 2.5vw;
}

#page > aside.widget-area .widget_archive {
	position: absolute;
	top: 35vw;
	left: 5vw;
}
#page > aside.widget-area .widget_archive h2 {
	color: #595454;
	position: relative;
	font-size: 2vw;
	padding-left: 9vw;
	margin-bottom: 2vw;
	text-align: left;
}
#page > aside.widget-area .widget_archive nav ul {
	width: 100%;
	padding-left: 0;
	text-align: left;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

#page > aside.widget-area .widget_archive nav ul li {
	font-size: 2.5vw;
	line-height: 10vw;
	margin-right: 5vw;
}
#page > aside.widget-area .widget_archive nav ul li a {
	font-size: 2.5vw;
}

#page > .site-content {
	padding-top: 50vw;
	margin-left: 12vw;
	padding-bottom: 25vw;
	background-position: center center;
	background-size: cover;
}

#page > .site-content article {
	width: 86vw;
	max-width: 1200px;
	margin: 7vw auto;
	background: rgba(255,255,255,.7);
	padding: 5vw;
	position: relative;
	left: -3vw;
}

#page > .site-content article header h1 {
	font-size: 3vw;
	color: #595454;
	margin-bottom: 5vw;
}

#page > .site-content article .entry-content p {
	font-size: 2vw;
	line-height: 1.8;
}
#page > .site-content article .entry-content p + p{margin-top:2.5vw;}

#page > .site-content article .entry-content p img{width:auto; max-width:350px; height:auto;}

}


@media only screen and (max-width:640px){
#page {
	position: relative;
	overflow: hidden;
}
#page > header h1 {
	width: 30%;
	max-width: 235px;
	position: absolute;
	top: 2vw;
	left: -2vw;
	z-index: 11;
}

#page > header > div.menu {
	width: calc(100% - 41.09375vw - 45.540540540540vw);
	height: 13vw;
	left: 84vw;
	padding: 1vw 1vw;
	position: fixed;
	background: rgba(255,255,255,.8);
	z-index: 10;
}

#page > header > div.menu #menuButton {
	overflow: hidden;
	display: block;
	position: relative;
	z-index: 0;
	width: 100%;
	height: 11vw;
	cursor: pointer;
}

#page > header > div.menu #menuButton span,
#page > header > div.menu #menuButton:before,
#page > header > div.menu #menuButton:after{
	display: block;
	position: absolute;
	top:0;
	bottom: 0;
	left:0;
	right: 0;
	width: 100%;
	height: 2px;
	margin: auto;
	background: #000;
	-webkit-transition: .1s ease-in-out;
	 transition: all 1s;
}

#page > header > div.menu #menuButton span{
	overflow: hidden;
	z-index: 1;
	color: #fff;
}

#page > header > div.menu #menuButton:before{
	z-index: 2;
	transform:rotate(0deg);
	top:7vw;
	content: "";
}

#page > header > div.menu #menuButton:after{
	z-index: 2;
	transform:rotate(0deg);
	top:-7vw;
	content: "";
}

#page > header > div.menu #menuButton span{
	transform:rotate(0deg) translateX(0px);
}

#page > header > div.menu #menuButton:before,
#page > header > div.menu #menuButton:after{
	transition: transform 500ms;
}

#page > header > div.menu.active #menuButton span{
	transform:translateX(-100px);
	top:0;
}

#page > header > div.menu.active #menuButton:before{
	transform:rotate(495deg);
	top:0;
}

#page > header > div.menu.active #menuButton:after{
	transform:rotate(405deg);
	top:0;
}


#page > aside.widget-area {
	position: fixed;
	left: -110vw;
	top: 25vw;
	width: 100%;
	text-align: center;
	background: #fff;
	height: 100vh;
	 transition: all 1s;
	z-index: 10;
}
.open #page > aside.widget-area {
	left: 0;
}

#page > aside.widget-area .widget_custom_html div {
	width: 15vw;
	margin: auto;
	position: absolute;
	top: 5vw;
	right: 5vw;
}

#page > .site-content nav ul {
	width: 100%;
	margin: 0;
	position: fixed;
	right: -110vw;
	top: 58vw;
	 transition: all 1s;
	z-index: 10;
}

.open #page > .site-content nav ul {right:0;}

#page > .site-content nav ul li{
	width:30%;
	line-height:10vw;
	}

#page > .site-content nav ul li a {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	text-align: center;
	font-size: 4vw;
}

#page > aside.widget-area .widget_archive {
	position: absolute;
	top: 50vw;
	left: 5vw;
}

#page > aside.widget-area .widget_archive h2 {
	color: #595454;
	position: relative;
	font-size: 4vw;
	padding-left: 15vw;
	margin-bottom: 2vw;
}
#page > aside.widget-area .widget_archive nav ul {
	width: 100%;
	padding-left: 15vw;
	text-align: left;
}

#page > aside.widget-area .widget_archive nav ul li {
	font-size: 4vw;
	line-height: 10vw;
}
#page > aside.widget-area .widget_archive nav ul li a {
	font-size: 4vw;
}

#page > .site-content {
	padding-top: 50vw;
	margin-left: 12vw;
	padding-bottom: 25vw;
	background-position: center center;
	background-size: cover;
}

#page > .site-content article {
	width: 86vw;
	max-width: 1200px;
	margin: 7vw auto;
	background: rgba(255,255,255,.7);
	padding: 5vw;
	position: relative;
	left: -3vw;
}

#page > .site-content article header h1 {
	font-size: 5vw;
	color: #595454;
	margin-bottom: 5vw;
}

#page > .site-content article .entry-content p {
	font-size: 3vw;
	line-height: 1.8;
}

#page > .site-content article .entry-content p + p{margin-top:5vw;}

#page > .site-content article .entry-content p img{width:auto; max-width:350px; height:auto;}
	
#page > .site-content article .entry-content div.steats{justify-content:flex-end;}

	
}