a{
	color: #2d2d2d;
	font-size: 18px}
li{
	text-align: left;
	list-style: none}

.circle li{list-style-type: circle}
.square li{list-style-type: square}

#pgDoc{
	padding: 1em}
#pgDoc li{font-weight: 500 !important}


#pgDoc a{color: #2d9e64}
#pgDoc p:not(#header p),
#pgDoc h4:not(#selector h4),
#pgDoc ul{color: #555}

#pgDoc article > h2{
	margin: 2em auto;
	color: #2d9e64;
	text-align: center}

/**/
body{background: #fff}

#header{
	padding: 1em;
	height: 800px;
	position: relative;
	text-align: center;
	border-radius: 20px;
	background-size: cover;
	-webkit-border-radius: 20px;
	background: url('../img/avnio-faq-banner.webp') #222;
	background-position: top center}
	#header:before{display: none}

	#header > div{
		top: 50%;
		left: 50%;
		width: 95%;
		color: #fff;
		position: absolute;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%)}

header{
	background: #fff;z-index: 2;
	box-shadow: 0 5px 20px rgba(0,0,0,.05);
	-webkit-box-shadow: 0 5px 20px rgba(0,0,0,.05)}

	header:after{
		content: '';
		z-index: -1;
		width: 100%;
		height: 125%;
		top: 0; left: 0;
		position: absolute;
		background-image: linear-gradient(to bottom,#f5f5f5 0%,rgba(0,0,0,0) 100%)}

	#selector{
		overflow-y: auto;
		max-height: 800px;
		padding: 7em 1em 1em}

	.policy::-webkit-scrollbar,
	#selector::-webkit-scrollbar {
		display: none}

		#selector a{
			width: auto;
			max-width: 90%;
			margin: 8px 2em;
			min-width: 500px;
			overflow: hidden;
			transition: .35s;
			position: relative;
			display: inline-block;
			color: #555 !important;
			-webkit-transition: .35s;
			padding: 5px 2px 5px 12px;
			border-left: solid 6px #2d9e64}

			#selector h2{
				color: #2d9e64;
				margin: 20px 35px;
			}

				#selector a:before{
					width: 0;
					z-index: -1;
					content: '';
					height: 100%;
					top: 0; left: -50%;
					position: absolute;
					background: #151a1a;
					transition: 1s ease;
					-webkit-transition: 1s ease}

				#selector a:hover{color: #2d9e64 !important}

				#selector a:hover:before{
					left: 80%;
					width: 150%}

				#selector a:hover{border-left-color: transparent}

/*
posts
*/



.iframe{
	background: #fff;
	margin: 3em auto;
	overflow: hidden;
	border-radius: 8px;
	-webkit-border-radius: 8px}

	.iframe figure{
		position: relative;
		padding-top: 56.2931%}

		.iframe iframe{
			top: 0; right: 0;
			position: absolute;
			width: 100%; height: 100%}


.switch-posts{
	text-align: center}

.switch-posts a{
	width: 40%;
	margin: 8px;
	padding: 12px;
	min-width: 400px;
	background: #fff;
	text-align: center;
	border-radius: 50px;
	display: inline-block;
	-webkit-border-radius: 50px;
	box-shadow: 0 5px 20px rgba(0,0,0,.05);
	-webkit-box-shadow: 0 5px 20px rgba(0,0,0,.05)}

/*
.switch-posts a:nth-child(2){
	border-radius: 0 50px 50px 0}
*/

.switch-posts a:nth-child(1):before,
.switch-posts a:nth-child(2):after{
		margin: 0 8px;
		color: #2d9e64;
		content: '\ea44';
		font-family: 'maxs001'}

.switch-posts a:nth-child(2):after{
	content: '\ea42'}

.mod-ul,
article ul{
	padding-left: 2em}

	.mod-ul li,
	article li{
		margin: 12px 0;
		list-style: initial}

	.mod-ul li{
		list-style: decimal}

article .btn{
	width: 240px;
	display: block;
	margin: 1em auto;
	padding: 12px 1em;
	text-align: center;
	background: #2d9e64;
	border-radius: 10px;
	color: #fff !important;
	-webkit-border-radius: 10px}

	article li img{
		padding: 5px;
		display: block;
		border: solid 1px #eee;
		margin: 1em auto !important}

.code-area{
	margin: 1em 0;
	overflow: hidden;
	font-size: 1.4em;
	background: #23241f;
	border-radius: 12px;
	-webkit-border-radius: 12px}

	.code-area > p{
		font-size: 1em;
		background: #111;
		font-weight: bold;
		padding: 8px 20px;
		color: #8bc34a !important}

.code-area *::selection {
    color: #8bc34a;
    background: rgba(80,80,80,.5)}

article table{
	width: 95%;
	margin: 1em 2.5%}

	article table tr{
		height: 40px}

	article table td,
	article table th{
		text-align: center;
		background: #2d9e64;
		border: solid 1px #ccc;}

	article table td{background: none}

	article table tr:nth-child(odd){
		background: #fff}

.bx-img img{
	padding: 5px;
	border-radius: 8px;
	border: solid 1px #ccc;
	-webkit-border-radius: 8px}


.reAnmition{
	opacity: 1;
	-webkit-opacity: 1;
	animation: reAnmition .5s;
	-webkit-animation: reAnmition .5s}

.xAnmition{
	opacity: 1;
	-webkit-opacity: 1;
	animation: xAnmition .5s;
	-webkit-animation: xAnmition .5s}

@keyframes reAnmition{
	0%{
		opacity: 0;
		transform: translateX(20px)}
	20%{opacity: 0}
}

@-webkit-keyframes reAnmition{
	0%{
		-webkit-opacity: 0;
		-webkit-transform: translateX(20px)}
	20%{opacity: 0}
}

@keyframes xAnmition{
	0%{
		opacity: 0;
		transform: translateX(20px)}
	20%{opacity: 0}
}

@-webkit-keyframes xAnmition{
	0%{
		-webkit-opacity: 0;
		-webkit-transform: translateX(20px)}
	20%{opacity: 0}
}

.ico-add:after{
	color: #fff;
	padding: 5px;
	font-size: 75%;
	margin: 0 3.5px;
	content: '\ea0a';
	background: #2d9e64;
	border-radius: 50px;
	-webkit-border-radius: 50px}

.ico-key:after,
.ico-trash:after,
.ico-setting:after,
.ico-save:after{
	content: 'key';
	color: #2d9e64;
	margin: 0 3.5px}

.ico-trash:after{
	content: '\e9ad'}
.ico-save:after{
	content: '\e962'}
.ico-setting:after{
	content: '\e994'}

.quote{
	margin: 1em 0;
	font-style: italic;
	color: #000 !important;
	padding: 8px 8px 8px 1em;
	border-left: solid 5px #2d9e64}
/**/


.null img{
	width: 500px;
	border: none}

.inline-b{
	width: auto;
	display: inline-block !important}


@media all and (max-width: 1860px){
	#selector{
		padding: 1em 5px}
}

@media all and (max-width: 768px){
	#selector a{
		margin: 1em 0;
		display: block}
	
	#selector h2{
		margin: 1em 0;
	}
}

@media all and (max-width: 640px){
	#selector,
	#header{
		height: inherit;
		max-height: inherit}

	#header{
		padding: 4em 1em}
		#header > div{
			top: auto;
			left: auto;
			transform: none;
			position: relative;
			-webkit-transform: none}
	#selector a{
		min-width: initial;
		max-width: initial}

	.switch-posts a{
		width: 400px;
		max-width: 92%;
		min-width: auto;
	}

	.switch-posts a:first-child{
		margin-top: 5em;
	}

}

@media all and (min-width: 640px){
	.switch-posts{
		padding: 5em 8px 0 8px}
	#menu li:nth-child(1) a{color: #2d9e64} 
}