:root {
		--border-radius: 6px;
		--main-color: #ff952c;
		--sub-color: rgb( 4, 30, 61 );
		
		--color-1: rgb( 4, 30, 61 );
		--color-2: #ff952c;
  	}
	  
	* { 
		box-sizing: border-box !IMPORTANT; 
		overflow-wrap: break-word;			
	}	
	
 	html, body, h1, h2, h3, h4 { 
		margin: 0;
		padding: 0;
		border: 0; 
	}

	body { 		
		font-size: 16px; 
		font-family: "Open Sans";
		background: #fff;		
		color: var(--color-1);
		padding: 89px 0 0 0;	
	}

    .main-color {
        color: var(--color-1);
    }

	a {
		color: var(--main-color);
		text-decoration: none;
	}	

	img {
		max-width: 100%;
	}

	input:focus {
		outline: 0;
	}

	.cb { 
		clear: both;
	}

	.overflow-hidden-i {
		overflow: hidden !important;
	}

	.pd-0-i {
		padding: 0 !important;
	}

	.pd-10 {
		padding: 10px;
	}

	.pd-20 {
		padding: 20px;
	}

	.pd-20-i {
		padding: 20px !important;
	}

	.pd-tb-0-i {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.placeholder-20 {
		height: 20px;
	}

	.placeholder-40 {
		height: 40px;
	}

	.placeholder-60 {
		height: 60px;
	}

	.placeholder-120 {
		height: 120px;
	}

	.d-flex {
		display: flex;
	}

	.d-flex-wrap {
		display: flex;
		flex-wrap: wrap;
	}	

	.d-flex-i {
		display: flex !important;
	}	

	.flex-center {
		justify-content: center;
	}

	.db-i {
		display: block !important;
	}

	/* section */

	section {
		padding: 10px;
	}

	section > .inr {
		max-width: 1200px;
		margin: 0 auto;
	}

	/* section 1 */

	.video-back {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 800px;
		z-index: -1;
		opacity: 1;
		object-fit: cover;
		padding: 70px 0 0 0;
	}

	section.s1 > .inr {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10px;
		min-height: 500px;
		text-align: center;
	}

	section.s1 > .inr > .left {
		flex: 60% 0 0;
		display: flex;
		flex-wrap: wrap;
		background: rgba( 255,255,255,.7);
		padding: 10px 10px 20px 10px;
		border-radius: 26px;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	section.s1 > .inr > .right {
		padding: 10px;
	}	

	section.s1 .txt-top {
		padding: 10px 10px 0 10px;
		font-size: 16px;
		flex: 100% 0 0;
	}

	section.s1 .txt-main {
		padding: 10px 10px 0 10px;
		font-size: 42px;
		line-height: 50px;
		flex: 100% 0 0;
	}

	section.s1 .txt-bottom {
		padding: 10px 10px 20px 10px;
		font-size: 16px;
		flex: 100% 0 0;
	}

	/* section 2 */

	section.s2 > .inr {
		display: flex;
		align-items: flex-end;
		padding: 20px 0 0 0;
	}

	section.s2 > .inr > .space {
		flex: 20px 0 0;		
	}

	section.s2 > .inr > .left {
		flex: 50% 0 0;
		display: flex;
		flex-wrap: wrap;
	}

	section.s2 .slider {
		padding: 5px;
	}

	section.s2 .slider img {
		width: 90px;
		border-radius: var(--border-radius);
		margin: 5px;
	}	

	section.s2 > .inr > .right {
		padding: 10px;
		flex-grow: 1;
	}	

	section.s2 > .inr > .right img {
		width: 100%;
		border-radius: var(--border-radius);
	}	

	section.s2 .txt-top {
		padding: 10px 10px 0 10px;
		font-size: 20px;
		line-height: 32px;
		font-weight: 300;	
	}

	section.s2 .txt-main {
		padding: 0 10px 10px 10px;
		font-size: 46px;			
	}

	section.s2 .txt {
		padding: 10px;
		font-size: 20px;
		line-height: 32px;
		font-weight: 300;
	}

	/* section 3 */

	section.s3 {
		margin-top: 140px;
		background-image: radial-gradient(circle farthest-side at center bottom,rgba(253,207,0,0.5),rgb(253, 207, 0) 100%);
	}

	section.s3 > .inr {
		position: relative;		
	}

	section.s3 > .inr > .img {
		position: absolute;
		top: -130px;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	section.s3 > .inr > .img img {
		display: block;
	}	

	section.s3 > .inr > .content {
		padding: 130px 0 0 0;
	}	

	section.s3 > .inr > .content > .title {		
		font-size: 46px;
		font-weight: 300;
		text-align: center;
	}	

	section.s3 > .inr > .content > .items {		
		display: flex;
	}	

	section.s3 > .inr > .content > .items > .item {		
		flex: 33.333333% 0 0;
		padding: 10px;
	}	

	section.s3 > .inr > .content > .items > .item > .title {		
		font-size: 26px;
		font-weight: 300;
	}

	/* section 4 */

	section.s4 > .inr {		
		display: flex;
		align-items: flex-start;
	}

	section.s4 .left {		
		position: sticky;
		top: 100px;	
		z-index: 999;
		padding: 10px;
		flex: 300px 0 0;
	}

	section.s4 .right {		
		flex-grow: 1;
	}

	section.s4 .items {		
		margin: -40px 0;
	}

	section.s4 .items > .item {		
		padding: 40px;
	}

	section.s4 .nav > .inr {		
		position: relative;
		background: #fff;		
		overflow: hidden;
		border: 1px solid #DBDBDB;
		border-radius: var(--border-radius);
		padding: 10px;
	}

	section.s4 .nav .scroll-left,
	section.s4 .nav .scroll-right {		
		display: none;	
	}

	section.s4 .nav .inr > .item,
	section.s4 .nav .inr > .item-active {
		padding: 5px 0px;		
		font-size: 16px;		
	}

	section.s4 .nav .inr > .item > .inr {
		padding: 0 10px;		
		cursor: pointer;		
	}	

	section.s4 .nav .inr > .item > .inr > .title {
		position: relative;
		z-index: 999;
		font-weight: 400;
		transition: color .2s;
		white-space: nowrap;		
	}

	section.s4 .nav .inr > .item.active > .inr > .title {
		font-weight: 700;
	}

	section.s4 .nav .inr > .item-active {
		position: absolute;
		left: 10px;
		z-index: 998;
		transition: all .2s;
		background: var(--color-2);
		width: 3px;
	}	         

	section.s4 > .inr > .right > .items > .item > .inr {
		display: flex;
		align-items: center;
	}

	section.s4 > .inr > .right > .items > .item .img {
		padding: 10px;
	}

	section.s4 > .inr > .right > .items > .item .img img {
		display: block;
		min-width: 260px;
		max-width: 260px;
	}

	section.s4 > .inr > .right > .items > .item .img .cnt {
		flex-grow: 1;
	}

	section.s4 > .inr > .right > .items > .item .title {
		padding: 10px 10px 0 10px;
		font-size: 34px;
		font-weight: bold;		
	}

	section.s4 > .inr > .right > .items > .item .title-sub {
		font-size: 24px;
		font-weight: 500;
		padding: 0 10px 10px 10px;	
	}

	section.s4 > .inr > .right > .items > .item .txt {
		padding: 10px;
		font-size: 20px;
		line-height: 32px;
		font-weight: 300;	
	}

	@media all and (max-width: 300px) {

		section.s4 .nav {
			position: sticky;
			top: 0;
			left: 0;
			right: 0;
			z-index: 9999;
			background: #fff;		
			overflow: hidden;
			margin: 0 -10px;
			padding: 0 25px;		
		}

		section.s4 .nav > .inr {		
			position: relative;
			overflow-x: scroll;
			white-space: nowrap;
			font-size: 0;
			padding: 10px 0;
			margin: 0 -5px;			
		}

		section.s4 .nav.arrows > .inr {	
			margin: 0 25px;		
		}

		section.s4 .nav > .inr::-webkit-scrollbar {
			display: none;
		}	  
		
		section.s4 .nav > .inr {
			-ms-overflow-style: none; 
			scrollbar-width: none; 
		}

		section.s4 .nav .inr > .item,
		section.s4 .nav .inr > .item-active {
			padding: 5px 10px 5px 0px;
			display: inline-block;
			font-size: 16px;		
		}	                

		section.s4 .nav .inr > .item > .inr {
			padding: 6px 10px;
			background: #eee;
			border-radius: 20px;
			cursor: pointer;		
		}	

		section.s4 .nav .inr > .item > .inr > .title {
			position: relative;
			z-index: 999;
			color: #000;
			transition: color .1s;
			white-space: nowrap;		
		}

		section.s4 .nav .inr > .item.active > .inr > .title {
			color: #fff;
		}

		section.s4 .nav .inr > .item-active {
			position: absolute;
			left: 0;
			z-index: 998;
			transition: all .2s;		
		}	                

		section.s4 .nav .inr > .item-active > .inr {
			padding: 6px 10px;
			background: var(--sub-color);
			border-radius: 20px;
			cursor: pointer;				
		}

		section.s4 .nav .scroll-left,
		section.s4 .nav .scroll-right {
			position: absolute;
			top: 0;		
			bottom: 0;		
			align-items: center;
			cursor: pointer;
			display: none;	
		}

		section.s4 .nav.arrows .scroll-left,
		section.s4 .nav.arrows .scroll-right {
			display: flex;
		}

		section.s4 .nav .scroll-left {		
			left: 20px;	
		}

		section.s4 .nav .scroll-right {
			right: 20px;	
		}

		section.s4 .nav .scroll-left::before,
		section.s4 .nav .scroll-right::before {	
			content: "\f104";
			font-family: FontAwesome;
			display: block;
			color: #999;
			font-size: 40px;
			line-height: 1;	
		}
		
		section.s4 .nav .scroll-right::before {	
			content: "\f105";
		}

	}

	@media all and (max-width: 300px) {
	
		section.s4 .nav .scroll-left,
		section.s4 .nav .scroll-right {
			display: none !important;
		}
		
		section.s4 .nav > .inr {	
			margin: 0 -5px !important;		
		}		

	}

	/* section 5 */

	section.s5 .items {
		display: flex;
		align-items: stretch;
		padding: 10px;			
	}

	section.s5 .items > .item {
		flex: 33.333333% 0 0;
		padding: 20px;	
		position: relative;
	}
	
	section.s5 .items > .item > .img {
		display: flex;
		justify-content: center;
		padding: 0 0 20px 0;	
		position: relative;
		z-index: 99;	
	}

	section.s5 .items > .item > .img img {
		max-width: 190px;
		display: block;			
	}

	section.s5 .items > .item > .no {
		position: absolute;		
		font-size: 160px;
		font-style: italic;
		font-weight: bold;
		opacity: .2;
		line-height: 1.6;
	}

	section.s5 .items > .item > .title {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24px;
		font-weight: bold;
		padding: 0 0 10px 0;
	}

	section.s5 .items > .item > .txt {
		text-align: center;
		line-height: 22px;	
		font-weight: 300;	
	}

	section.s5 .items > .item-sep {
		flex: 20px 0 0;				
	}

	/* section 6 */	

	section.s6  {
		background: rgba(0, 75, 106, .2);
		margin-bottom: -80px;
	}

	section.s6 > .inr > .title {
		padding: 50px 10px;
		font-size: 46px;
		font-weight: bold;
		text-align: center;
	}

	section.s6 > .inr > .title::before,
	section.s6 > .inr > .title::after {	
		content: "[";
		display: inline-block;
		font-weight: 100;
		font-size: 80px;
		padding: 0 30px 0 0;
	}
	
	section.s6 > .inr > .title::after {	
		content: "]";
		padding: 0 0 0 30px;
	}

	/* button */

	div.button {
		padding: 10px;
	}

	div.button a {
		text-decoration: none;
		border: 1px solid var(--color-1);
		color: var(--color-1);
		border-radius: 100px;
		padding: 10px 20px;
		font-size: 20px;
		font-weight: 600;
	}	

	div.button.button-dark a {		
		background: var(--color-1);
		color: #fff;	
	}	
	
	/* display */

	.dn-i { 
		display: none !important;
	}

	/* tabs */

	.tabs {
		margin: 10px 10px 0 10px;		
		border-bottom: 2px solid #ddd;
		display: flex;
		flex-wrap: wrap;
	}

	.tabs a {
		border-bottom: 2px solid #ddd;
		text-decoration: none;
		font-size: 20px;
		margin: 0 10px -2px 10px;	
		color: #000;
		display: block;	
		padding: 0 0 3px 0;
		transition: all .2s;
	}

	.tabs a:first-child {	
		margin-left: 0;	
	}	

	.tabs a.active,
	.tabs a:hover {
		border-bottom: 2px solid var(--main-color);
		color: var(--main-color);	
	}

	/* info */

	.info {
		font-size: 16px;
		padding: 10px 10px 10px 25px;
		color: rgb(0, 151, 0);		
		background-color: rgb(181, 255, 181);
		border-radius: var(--border-radius);
		position: relative;
		margin: 10px;
	}

	.info .sub{
		font-size: 13px;
	}	

	.info::before {
		display: block;
		position: absolute;
		top: 11px;
		left: 10px;
		content: "\f129";		
		font-family: FontAwesome;
	}
	
	.info.fault {		
		color: rgb(223, 53, 53);
		background-color: rgb(255, 227, 227);
	}

	.info.fault::before {
		content: "\f12a";	
	}	

	/* form - captcha */

	.form-subit-captcha {
		display: flex;
	}

	.form-subit-captcha label.captcha-img img {
		border-radius: var(--border-radius);
	}

	.form-subit-captcha label.captcha-text {
		flex: 90px 0 0;
	}

	.form-subit-captcha label.button {
		flex: unset;
		flex-grow: 1;
	}

	@media all and (max-width: 520px) {

		.form-subit-captcha {
			flex-wrap: wrap;
		}

		.form-subit-captcha label.captcha-text {
			flex: calc( 100% - 140px ) 0 0;
		}

		.form-subit-captcha label.button {
			flex: 100% 0 0;
		}

	}	

	/* form  */	

	.form-info-fixed {
		position: fixed;
		top: 180px;
		left: 60px;
		z-index: 9999;
	}

	.form-info-fixed > .info {
		box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.75);
	}	

	.label,
	label {
		padding: 10px;	
		display: block;	
	}

	.label .title,
	label .title {
		padding: 0 0 5px 0;
		font-size: 15px;			
	}

	.label.mandatory .title::after,
	label.mandatory .title::after {
		content: "*";
		display: inline-block;
		color: var(--sub-color);
		padding: 0 0 0 5px;			
	}

	label .title .change-link {
		display: inline-block;
		color: var(--main-color);
		padding: 0 0 0 10px;
		cursor: pointer;
	}

	label .title .change-link::before{
		content: "[";
	}

	label .title .change-link::after{
		content: "]";
	}

	.label.text .input-con,
	label.text .input-con {
		position: relative;		
	}

	.label.text .input-con input,
	label.text .input-con input {
		border: 2px solid #ddd;
		border-radius: var(--border-radius);
		font-size: 15px;
		height: 44px;
		width: 100%;
		padding: 0 10px;		
	}

	.label.text.field-fault .input-con input,
	label.text.field-fault .input-con input {
		border-color: rgb(223, 53, 53);		
	}

	label.text .input-con input[readonly="readonly"] {
		background: #ddd;
	}

	label.select.field-fault .input-con select {
		border-color: var(--sub-color);		
	}	

	label.textarea .input-con textarea {
		border: 2px solid #ddd;
		border-radius: var(--border-radius);
		font-size: 15px;
		height: 140px;
		width: 100%;		
	}

	label.select .input-con select {
		border: 2px solid #ddd;
		border-radius: var(--border-radius);
		font-size: 15px;
		height: 44px;
		width: 100%;
		padding: 0 10px;
		background: #fff;
	}

	/* form - select exp */

	label.select-exp .input-con {
		border: 2px solid #ddd;
		border-radius: var(--border-radius);
		font-size: 15px;
		height: 44px;
		width: 100%;
		position: relative;	
		cursor: pointer;
		overflow: hidden;	
	}

	label.select-exp .input-con::after {
		content: "\f107";
		font-size: 25px;
		line-height: 25px;
		color: var(--main-color);
		font-family: FontAwesome;
		display: block;
		transition: transform .2s;
		position: absolute;
		top: 0;
		right: 0;	
		padding: 10px;
	}

	label.select-exp.open .input-con::after {
		transform: rotate(180deg);
	}

	label.select-exp.open .input-con {
		overflow: initial;
	}	

	label.select-exp .items {
		margin: 50px -2px 0 -2px;
		background: #fff;	
		border-radius: var(--border-radius);		
		position: absolute;	
		padding: 5px 0;			
	}

	label.select-exp.open .items {
		z-index: 999;				
	}	

	label.select-exp.open .items {
		box-shadow: 0px 0px 15px 2px rgba(0,0,0,0.77);			
	}	

	label.select-exp .items .item {		
		padding: 5px 10px;
		display: flex;		
		align-items: center;		
	}

	label.select-exp .items .item img {		
		width: 40px;
		height: 40px;
		object-fit: cover;
		border-radius: 50%;	
		margin: 0 10px 0 0;
	}

	label.select-exp .items .item.active {
		color: var(--main-color);
	}

	label.select-exp .items .item.active::before {
		content:attr( data-title );
		display:block;
		color: var(--default-color);
		height: 40px;
		padding: 10px 10px 0 10px;	
		position: absolute;
		top: -50px;
		right: 0;
		left: 0;
	}
	
	label.select-exp .items .item-group-title {		
		padding: 5px 10px;
		font-weight: bold;	
		margin: 0 0 0 -10px;	
	}

	label.select-exp .items .item-group {		
		padding: 0 0 0 10px;		
	}	

	/* form - unit - inr */	

	label.text .input-con .unit-inr {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		height: 100%;	
		background: #ddd;
		font-size: 22px;
		padding: 6px 16px 0 16px;
		border-radius: 0 var(--border-radius) var(--border-radius) 0;		
	}

	/* form - autocomplete */

	.label.text .input-con .autocomplete {
		width: 100%;		
		position: absolute;
		top: 100%;
		padding: 10px 0 0 0;
		display: none;
	}
	
	.label.text .input-con .autocomplete > .inr {
		background-color: #fff;
		box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.2);
		border-radius: var(--border-radius);
	}

	/* form - file upload */

	.label.file-upload .input-con {
		position: relative;		
	}

	.label.file-upload .input-con .input-info {
		border: 2px solid #ddd;
		background: #ddd;
		border-radius: var(--border-radius);
		font-size: 15px;
		height: 44px;
		width: 100%;
		padding: 0 10px;
		display: flex;
		justify-content: center;
		align-items: center;		
	}
	
	.label.file-upload .input-con input {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		cursor: pointer;
	}
	
	/* progress */

	.form-info-progress {
		position: fixed;
		z-index: 999999999;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba( 0, 0, 0, .4 );
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.form-info-progress .progress-bar {
		width: 300px;
		height: 32px;
		background-color: #fff;
		box-shadow: 0px 0px 15px 2px rgba(0,0,0,0.5);
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: var(--border-radius);
		overflow: hidden;
	}

	.form-info-progress .progress-bar > .inr {
		position: absolute;
		top: 0;
		bottom: 0;		
		left: 0;
		width: 0%;	
		height: 100%;	
		background: var(--main-color);
		transition: width .3s;
	}

	.form-info-progress .progress-bar > .val {
		font-size: 16px;
		font-weight: 600;
		position: relative;
		z-index: 999;
	}


	/* form - button */

	label.button .inr {
		font-size: 17px;
		color: #fff;
		background: var(--sub-color);
		padding: 0 12px;
		border-radius: var(--border-radius);
		text-decoration: none;
		cursor: pointer;
		text-align: center;
		height: 42px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* form - checkbox text */

	label.checkbox-text {
		cursor: pointer;				
	}	

	label.checkbox-text > .inr {
		display: flex;
		align-items: flex-start;		
	}

	label.checkbox-text .check {
		background: #ddd;
		border-radius: var(--border-radius);
		min-width: 20px;
		height: 20px;
		position: relative;
		margin: 2px 12px 0 0;
	}

	label.checkbox-text.active .check::before {
		position: absolute;
		top: -5px;
		left: 4px;
		content: "\f00c";
		font-family: FontAwesome;
		display: block;
		color: var(--main-color);
		font-size: 24px;
		line-height: 24px;
	}

	label.checkbox-text .text {
		font-size: 15px;
		line-height: 22px;
	}


	/* form - select box */
	
	label.select-box .items {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		margin: -5px;		
	}

	label.select-box .items > .item {		
		display: flex;	
		align-items: stretch;
		justify-content: center;
		padding: 5px;
	}

	label.select-box .items > .item > .inr {
		border: 2px solid #ddd;
		border-radius: var(--border-radius);
		text-align: center;
		flex: 100% 0 0;	
		padding: 5px;	
	}

	label.select-box .items > .item .icon {
		font-family: FontAwesome;
		font-size: 20px;
		padding: 5px 10px;
	}

	label.select-box .items > .item .text {
		font-weight: 600;
		padding: 5px 10px;
	}

	label.select-box .items > .item .description {
		padding: 5px 10px;
		font-size: 12px;
	}

	label.select-box .items > .item.active > .inr {
		border: 2px solid var(--main-color);
	}

	/* form - checkbox text image */

	label.checkbox-text-image > .inr {
		align-items: center;
		background: #eee;
		border-radius: var(--border-radius);
		padding: 10px;		
	}

	label.checkbox-text-image > .inr > img {
		flex: 60px 0 0;
		width: 60px;
		background: #fff;
		padding: 5px;
		border-radius: var(--border-radius);
	}

	label.checkbox-text-image > .inr > .text {
		flex-grow: 1;
		padding: 0 20px;
	}

	label.checkbox-text-image .check {
		background: #fff;
		border-radius: var(--border-radius);		
		height: unset;
		position: relative;	
		display: flex;	
		margin: unset;
		overflow: hidden;		
	}
 
	label.checkbox-text-image .check::before,
	label.checkbox-text-image.active .check::before,
	label.checkbox-text-image .check::after {
		position: unset;
		top: unset;
		left: unset;
		content: attr(data-val-active);
		font-family: unset;
		display: block;
		color: #666;
		font-size: 20px;
		line-height: 20px;
		padding: 5px 10px;
	}

	label.checkbox-text-image .check::after {
		content: attr(data-val-inactive);
	}

	label.checkbox-text-image.active .check::before {	
		color: #fff;
		background: var(--main-color);
	}

	label.checkbox-text-image:not(.active) .check::after {	
		color: #fff;
		background: var(--sub-color);
	}	

	/* header - main */

	.header-main {
		background: #fff;
		padding: 0 10px;		
		position: relative;
		z-index: 9999;
		box-shadow: 0 6px 6px rgba( 0, 0, 0, .2);
		position: fixed;
		top: 0;
		right: 0;
		left: 0;	
	}

	.header-main > .inr {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.header-main > .inr > .logo {
		display: block;		
		text-decoration: none;
		padding: 10px;
		width: 217px;
		transition: width .2s;
	}

	body.scrollpos-greater-0 .header-main > .inr > .logo {
		width: 160px;
		transition: width .2s;
	}

	.header-main > .inr > .right {
		display: flex;
		align-items: center;
	}
	
	.header-account.login {
		padding: 0 10px;
		position: relative;
		cursor: pointer;
	}

	.header-account.login > .inr {
		display: flex;
		align-items: center;
		font-size: 16px;
		border: 1px solid #eee;
		color: var(--main-color);
		height: 40px;
		padding: 0 16px;
		border-radius: var(--border-radius);
		background: #eee;
	}

	.header-account.login > .inr:before {
		content: "\f007";
		font-family: FontAwesome;
		display: block;				
		font-size: 24px;
		padding: 0 10px 0 0;		
	}

	.header-account.login > .login-form {
		position: absolute;
		bottom: -10px;
		right: 0;
		height: 0;
		z-index: 9999;
		padding: 0 10px;
	}

	.header-account.login > .login-form > .inr {
		width: 260px;
		background: #fff;
		border-radius: var(--border-radius);
		box-shadow: 0px 0px 12px -6px rgba(0,0,0,0.75);
		padding: 15px;
		position: relative;
	}	

	.header-account.login > .login-form > .inr label {
		padding: 5px;
	}

	.header-account.login > .login-form > .inr input[type=password],
	.header-account.login > .login-form > .inr input[type=text] {
		height: 38px;
	}

	.login.active > .inr {
		background: var(--main-color);
		color: #fff;	
		align-items: center;
		font-size: 26px;
		border: 0;
		width: 40px;
		height: 40px;		
		border-radius: 20px;
		justify-content: center;		
	}

	.login.active .account-logout {
		position: absolute;
		right: 10px;
		top: 10px;
		text-decoration: none;
	}

	.login.active .account-logout::before {
		content: "\f08b";	
		font-family: FontAwesome;
		display: block;
		color: var(--main-color);
		font-size: 26px;
	}

	.login.active > .inr:before {
		display: none;	
	}

	.login.active .main-title {
		font-size: 18px;
		font-weight: bold;
		margin: 20px 0 0 0;
	}

	.login.active .ety-items {
		padding: 5px 0;
	}

	.login.active .ety-items > .ety-item {
		display: block;
		text-decoration: none;
		color: var(--main-color);
		padding: 0;
		height: 22px;
		overflow: hidden;
	}

	.login.active .account-char {
		display: flex;
		margin: 10px auto;
		background: var(--main-color);
		color: #fff;	
		align-items: center;
		font-size: 30px;
		border: 0;
		width: 50px;
		height: 50px;		
		border-radius: 25px;
		justify-content: center;
	}

	.login.active .account-data {
		display: block;
		margin: 10px auto;
		padding: 5px 0;
		border: 1px solid var(--main-color);
		border-radius: 50px;
		width: 180px;
		text-align: center;
		text-decoration: none;
		color: var(--main-color);
	}

	/* header - main - mobile */

	.mobile-menu-button {
		cursor: pointer;
		display: none;
		padding: 0 10px;
	}

	.mobile-menu-button::before {
		content: "\f0c9";
		font-family: FontAwesome;
		display: block;
		color: var(--main-color);
		font-size: 32px;		
	}

	.header-main-mobile {
		position: fixed;
		z-index: 999999999;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 10px;
		background: rgba( 255, 255, 255, .9 );
		display: none;		
	}

	.header-main-mobile > .inr {
		flex: 100% 0 0;		
		background: #fff;
		border-radius: var(--border-radius);
		box-shadow: 0px 0px 12px -6px rgba(0,0,0,0.75);
		max-height: 100%;
		overflow-y: auto;		
	}	

	.header-main-mobile .title-sep {
		color: var(--main-color);
		display: flex;
		align-items: center;
		margin: 0 10px;
		padding: 10px 0;
		font-weight: 600;
		font-size: 18px;
	}

	.header-main-mobile .title-sep > .inr {		
		padding: 0 10px;
	}

	.header-main-mobile .title-sep::before {
		flex: 20px 0 0;
		content: "";
		height: 1px;
		background: var(--main-color);
	}

	.header-main-mobile .title-sep::after {
		flex-grow: 1;
		content: "";
		height: 1px;
		background: var(--main-color);
	}

	.header-main-mobile > .inr > .top {		
		background: var(--main-color);
		display: flex;
		justify-content: space-between;
		padding: 10px;	
	}	

	.header-main-mobile > .inr > .top .top-button {		
		padding: 10px;
		display: block;
		text-decoration: none;
	}

	.header-main-mobile > .inr > .top .top-button > .inr {
		border: 2px solid #fff;
		border-radius: 50px;			
		color: #fff;			
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 10px 0 10px;		
		cursor: pointer;
		position: relative;
	}

	.header-main-mobile > .inr > .top .top-button > .inr::before {
		content: "\f007";
		font-family: FontAwesome;
		display: block;
		font-size: 24px;
		line-height: 1;	
		padding: 0 10px 0 0 ;
		font-weight: normal;	
	}

	.header-main-mobile > .inr > .top .top-button.account > .inr::before {
		content: unset;
	}

	.header-main-mobile > .inr > .top .top-button.account > .inr .char {
		height: 40px;
		background: #fff;
		color: var(--main-color);
		border-radius: 50px;
		width: 40px;
		padding: 0;
		margin: 0 10px 0 -11px;	
		display: flex;
		justify-content: center;
		align-items: center;	
		font-size: 24px;
		font-weight: 600;
	}

	.header-main-mobile > .inr > .top .top-button.search > .inr::before {
		content: "\f104";
		font-size: 34px;	
	}

	.header-main-mobile > .inr > .top .top-button.logout > .inr {
		width: 40px;
	}

	.header-main-mobile > .inr > .top .top-button.logout > .inr::before {
		content: "\f08b";
		padding: 0;			
	}

	.header-main-mobile > .inr > .top .close {
		padding: 10px;
	}

	.header-main-mobile > .inr > .top .close > .inr {
		border: 2px solid #fff;
		border-radius: 50px;	
		height: 40px;
		width: 40px;
		text-align: left;		
		cursor: pointer;
		position: relative;
	}

	.header-main-mobile > .inr > .top .close > .inr::before, 
	.header-main-mobile > .inr > .top .close > .inr::after {
		width: 2px;
		background-color: #fff;
		content: '';
		position: absolute;
		top: 7px;
		bottom: 7px;
		left: 50%;
		margin-left: -1px;
	}

	.header-main-mobile > .inr > .top .close > .inr::before {
		transform: rotate( 45deg );
	}

	.header-main-mobile > .inr > .top .close > .inr::after {
		transform: rotate( -45deg );
	}

	.header-main-mobile .area {
		padding: 10px;
	}

	.header-main-mobile .area-login label.text,
	.header-main-mobile .area-login label.button {	
		padding: 0;
		margin: 10px;	
	}

	.header-main-mobile .area-login label.text .input-con input {
		border: 2px solid var(--main-color);	
	}
	
	.header-main-mobile .area-login label.button > .inr {	
		font-size: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
	} 

	.header-main-mobile .area-login label.button > .inr::before {
		content: "\f090";
		font-family: FontAwesome;
		display: block;
		color: #fff;
		padding: 0 10px 0 0;
	}

	.header-main-mobile .area-account .account-data {
		border: 2px solid var(--main-color);
		border-radius: 50px;
		margin: 10px;
		padding: 0 10px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
  	}

	.header-main-mobile .area-account .ety-items > .ety-item {		
		display: flex;
		align-items: center;
  	}

	.header-main-mobile .area-account .ety-items > .ety-item img {		
		width: 60px;
		height: 60px;
		border-radius: var(--border-radius);
		object-fit: cover;
		margin: 10px;
  	}

	.header-main-mobile .area-account .ety-items > .ety-item img.default {		
		background-color: rgba( 14, 182, 182, 0.2 );
		padding: 6px;
		object-fit: none;
  	}

	/**/

	.menu-main {
		display: flex;
	}

	.menu-main > a {
		color: var(--color-1);
		font-size: 20px;
		display: block;
		text-decoration: none;
		padding: 5px 10px;
		font-weight: 300;
	}

	.menu-main > .sep {
		width: 5px;
	}

	/* footer */

	section.footer {
		background: var(--color-2);		
	}

	section.footer > .inr {
		display: flex;
		justify-content: space-between;
	}

	section.footer .copyright {
		padding: 10px;		
	}

	.menu-bottom {
		padding: 10px;
		display: flex;
	}

	.menu-bottom > * {
		color: #fff;
		text-decoration: none;
	}

	.menu-bottom > .sep {
		width: 10px;
	}

	/* checkbox */

	.checkbox {
		border: 2px solid #000;
		border-radius: 2px;
		flex: 18px 0 0;		
		height: 18px;
		justify-content: center;
		align-items: center;
		display: flex;
	}

	.checkbox.active {
		background: var(--main-color);
		border-color: var(--main-color);
	}

	.checkbox.active:after {
		content: "\f00c";
		display: block;
		font-family: FontAwesome;
		font-size: 14px;
		color: #fff;
	}	
	
	/* items 1 */

	.i1 {
		display: flex;
		align-items: stretch;					
	}

	.i1 > .item {
		flex: calc(25% - 20px) 0 0;
		padding: 20px;
		border-radius: 26px;
		border: 1px solid #DBDBDB;
		margin: 10px;
	}

	.i1 > .item > .title {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24px;
		font-weight: bold;
		padding: 0 0 10px 0;
		text-align: center;
	}

	.i1 > .item > .txt {
		text-align: center;
		line-height: 22px;	
		font-weight: 300;	
	}

	.i1 > .item-sep {
		display: none;		
	}

	.i1 > .item::before {
		display: block;		
		text-align: center;
		content: "\f002";
		font-family: FontAwesome;		
		color: var(--color-2);
		font-size: 60px;
		padding: 10px 10px 30px 10px;
	}	

	.i1 > .item.item-2::before {	
		content: "\f291";
	}

	.i1 > .item.item-3::before {	
		content: "\f08a";
	}

	@media all and (max-width: 960px) {

		.i1 {
			flex-wrap: wrap;		
		}

		.i1 > .item {
			flex: calc(50% - 20px) 0 0;		
		}

	}

	@media all and (max-width: 600px) {

		.i1 > .item {
			flex: calc(100% - 20px) 0 0;		
		}

	}
	
	/* items 2 */

	.i2 {
		display: flex;
		align-items: stretch;
		padding: 10px 0;
		color: #fff;			
	}

	.i2 > .item {
		flex: calc(25% - 20px ) 0 0;
		padding: 20px;
		border-radius: 26px;
		background: var(--color-1);
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: 10px;
	}

	.i2 > .item:hover {		
		background: var(--color-2);
	}

	.i2 > .item > .title {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24px;
		font-weight: bold;
		padding: 0 0 10px 0;
	}

	.i2 > .item > .txt {
		text-align: center;
		line-height: 22px;	
		font-weight: 300;	
	}

	.i2 > .item > .btn {
		margin: 20px 0 10px 0;
		display: block;
		text-decoration: none;
		background: #fff;
		color:  var(--color-1);
		border-radius: 100px;
		padding: 8px 20px;
		font-size: 20px;
		font-weight: 600;	
	}

	.i2 > .item-sep {
		display: none;			
	}

	.i2 > .item::before {
		display: block;	
		flex: 100% 0 0;	
		text-align: center;
		content: "\f002";
		font-family: FontAwesome;			
		font-size: 60px;
		padding: 10px 10px 30px 10px;
	}	

	.i2 > .item.item-2::before {	
		content: "\f291";
	}

	.i2 > .item.item-3::before {	
		content: "\f08a";
	}

	@media all and (max-width: 1020px) {

		.i2 {
			flex-wrap: wrap;		
		}

		.i2 > .item {
			flex: calc(50% - 20px) 0 0;		
		}

	}

	@media all and (max-width: 600px) {

		.i2 > .item {
			flex: calc(100% - 20px) 0 0;		
		}

	}

	/* title */

	.t {
		padding: 0 10px;
	}

	.t1 {
		font-size: 60px;
		font-weight: bold;
		text-align: center;		
	}

	.t2 {
		font-size: 60px;
		font-weight: 300;
		text-align: center;
	}

	.t2 b {
		font-weight: 700;
	}

	.t3 {
		font-size: 26px;
		font-weight: 300;
		text-align: center;
	}

	.t4 {
		font-size: 46px;
		font-weight: bold;
		text-align: center;
	}

	.t5 {
		font-size: 46px;
		font-weight: 300;
		text-align: center;
	}

	.t6 {		
		font-size: 20px;
		line-height: 32px;
		font-weight: 300;
		text-align: center;
	}	

	/* menu browse */

	.menu_browse {
		display: flex;
		padding: 5px;
	}

	.menu_browse > * {
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid #ddd;
		border-radius: var(--border-radius);		
		font-size: 14px;
		text-decoration: none;
		margin: 5px;
		color: #000;
		width: 36px;
		height: 36px;
	}

	.menu_browse > .ac,
	.menu_browse > *:hover {	
		border: 1px solid var(--main-color);
		outline: 1px solid var(--main-color);
		color: var(--main-color);
	}

	.menu_browse > .cb {	
		display: none;
	}

	/* breadcrumb */

	.breadcrumb > .inr {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		padding: 10px;
	}

	.breadcrumb > .inr > .item {
		font-size: 14px;
		color: #888;
	}

	.breadcrumb > .inr > a.item {
		text-decoration: none;
		color: var(--main-color);
		display: block;
	}
	
	.breadcrumb > .inr > .sep::after {
		content: "\f105";
		font-family: FontAwesome;
		display: block;
		padding: 0 6px;
		font-weight: normal;
		font-size: 16px;
		color: #999;
	}

	/* info popup */

	.info-popup {
		position: fixed;
		z-index: 999999999;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba( 0, 0, 0, .4 );
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20px;
	}

	.info-popup > .inr {
		overflow-y: auto;
		position: relative;
		background: #fff;
		border-radius: var(--border-radius);
		box-shadow: 0px 0px 12px -6px rgba(0,0,0,0.75);
		width: 600px;
		max-width: 100%;		
		max-height: 100%;
		padding: 10px;
	}

	.info-popup > .inr > .close {
		position: absolute;
		top: 20px;
		right: 20px;
		cursor: pointer;
	}

	.info-popup > .inr > .close::after {
		content: "\f00d";
		font-family: FontAwesome;
		display: block;		
		font-size: 26px;	
	}

	.info-popup > .inr > .title {
		padding: 10px;
		font-weight: bold;
		font-size: 18px;
	}

	.info-popup > .inr > .content {
		padding: 0 10px 10px 10px;		
		font-size: 15px;
		line-height: 22px;	 
	}

	/* faq */

	.faq > .inr {
		padding: 10px;
	}

	.faq .items {
		overflow: hidden;
		border-radius: var(--border-radius);
	}

	.faq .items > .item  {
		margin-top: 1px;
	}

	.faq .items > .item:first-child  {
		margin-top: 0;
	}

	.faq .items > .item > .title {
		background: rgba( 14, 182, 182, .1 );
		padding: 6px 10px;
		color: var(--main-color);
		font-weight: bold;
		font-size: 16px;
		display: flex;
		justify-content: space-between;	
		align-items: center;
		cursor: pointer;	
	}

	.faq .items > .item > .title::after {
		content: "\f107";
		font-size: 25px;
		line-height: 25px;		
		font-family: FontAwesome;
		display: block;
		transition: transform .2s;			
	}

	.faq .items > .item.open > .title::after {
		transform: rotate(180deg);	
	}

	.faq .items > .item > .content {		
		height: 0;
		overflow: hidden;		
	}

	.faq .items > .item > .content > .inr {		
		padding: 6px 10px		
	}

	/* header - main - mobile */

	.mobile-menu-button {
		cursor: pointer;
		display: none;
		padding: 0 10px;
	}

	.mobile-menu-button::before {
		content: "\f0c9";
		font-family: FontAwesome;
		display: block;
		color: var(--main-color);
		font-size: 32px;		
	}

	.header-main-mobile {
		position: fixed;
		z-index: 999999999;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 10px;
		background: rgba( 255, 255, 255, .9 );
		display: none;		
	}

	.header-main-mobile > .inr {
		flex: 100% 0 0;		
		background: #fff;
		border-radius: var(--border-radius);
		box-shadow: 0px 0px 12px -6px rgba(0,0,0,0.75);
		max-height: 100%;
		overflow-y: auto;		
	}	

	.header-main-mobile .title-sep {
		color: var(--main-color);
		display: flex;
		align-items: center;
		margin: 0 10px;
		padding: 10px 0;
		font-weight: 600;
		font-size: 18px;
	}

	.header-main-mobile .title-sep > .inr {		
		padding: 0 10px;
	}

	.header-main-mobile .title-sep::before {
		flex: 20px 0 0;
		content: "";
		height: 1px;
		background: var(--main-color);
	}

	.header-main-mobile .title-sep::after {
		flex-grow: 1;
		content: "";
		height: 1px;
		background: var(--main-color);
	}

	.header-main-mobile > .inr > .top {		
		background: var(--main-color);
		display: flex;
		justify-content: space-between;
		padding: 10px;	
	}	

	.header-main-mobile > .inr > .top .top-button {		
		padding: 10px;
		display: block;
		text-decoration: none;
	}

	.header-main-mobile > .inr > .top .top-button > .inr {
		border: 2px solid #fff;
		border-radius: 50px;			
		color: #fff;			
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 10px 0 10px;		
		cursor: pointer;
		position: relative;
	}

	.header-main-mobile > .inr > .top .top-button > .inr::before {
		content: "\f007";
		font-family: FontAwesome;
		display: block;
		font-size: 24px;
		line-height: 1;	
		padding: 0 10px 0 0 ;
		font-weight: normal;	
	}

	.header-main-mobile > .inr > .top .top-button.account > .inr::before {
		content: unset;
	}

	.header-main-mobile > .inr > .top .top-button.account > .inr .char {
		height: 40px;
		background: #fff;
		color: var(--main-color);
		border-radius: 50px;
		width: 40px;
		padding: 0;
		margin: 0 10px 0 -11px;	
		display: flex;
		justify-content: center;
		align-items: center;	
		font-size: 24px;
		font-weight: 600;
	}

	.header-main-mobile > .inr > .top .top-button.search > .inr::before {
		content: "\f104";
		font-size: 34px;	
	}

	.header-main-mobile > .inr > .top .top-button.logout > .inr {
		width: 40px;
	}

	.header-main-mobile > .inr > .top .top-button.logout > .inr::before {
		content: "\f08b";
		padding: 0;			
	}

	.header-main-mobile > .inr > .top .close {
		padding: 10px;
	}

	.header-main-mobile > .inr > .top .close > .inr {
		border: 2px solid #fff;
		border-radius: 50px;	
		height: 40px;
		width: 40px;
		text-align: left;		
		cursor: pointer;
		position: relative;
	}

	.header-main-mobile > .inr > .top .close > .inr::before, 
	.header-main-mobile > .inr > .top .close > .inr::after {
		width: 2px;
		background-color: #fff;
		content: '';
		position: absolute;
		top: 7px;
		bottom: 7px;
		left: 50%;
		margin-left: -1px;
	}

	.header-main-mobile > .inr > .top .close > .inr::before {
		transform: rotate( 45deg );
	}

	.header-main-mobile > .inr > .top .close > .inr::after {
		transform: rotate( -45deg );
	}

	.header-main-mobile .area {
		padding: 10px;
	}

	.header-main-mobile .area-login label.text,
	.header-main-mobile .area-login label.button {	
		padding: 0;
		margin: 10px;	
	}

	.header-main-mobile .area-login label.text .input-con input {
		border: 2px solid var(--main-color);	
	}
	
	.header-main-mobile .area-login label.button > .inr {	
		font-size: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
	} 

	.header-main-mobile .area-login label.button > .inr::before {
		content: "\f090";
		font-family: FontAwesome;
		display: block;
		color: #fff;
		padding: 0 10px 0 0;
	}

	.header-main-mobile .area-account .account-data {
		border: 2px solid var(--main-color);
		border-radius: 50px;
		margin: 10px;
		padding: 0 10px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
  	}

	.header-main-mobile .menu-main {
		display: block;
	}

	.header-main-mobile .menu-main > .sep {
		display: none;
	}

	/* booking - info */
	
	section.order-info .order-info-txt {
		margin: 10px;
		border-left: 5px solid var(--main-color);
		background: #eee;
		padding: 10px;
		border-radius: var(--border-radius);
	}

	section.order-info .order-info-txt .sub {
		padding: 5px 0 0 0;
		font-size: 13px;
	}

	/* partner - register */

	.partner-register {
		margin: 0 auto;
		max-width: 480px;
		padding: 20px;
	}

	.partner-register > .inr {
		border: 1px solid #ddd;
		border-radius: var(--border-radius);
		padding: 10px;
	}

	.partner-register-title {
		font-size: 18px;
		font-weight: bold;
		padding: 10px 10px 20px 10px;
	}

	/* recall */

	.ety-recall > .inr {
		max-width: 800px;	
	}	

	.ety-recall-title {
		text-align: center;
	}

	.ety-recall-title > .inr {
		font-size: 36px;
		font-weight: 600;	
		max-width: 800px;
		padding: 40px 10px 10px 10px;
	}

	.ety-recall-title > .inr > .sub {
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
		padding: 10px 0 0 0;
	}

	.ety-recall-title .quote {
		color: var(--sub-color);
	}

	.ety-recall-title .quote::before {		
		content: "\f10d  ";
		font-family: FontAwesome;
		font-size: 20px;
		font-weight: normal;
		vertical-align: top;
	}

	.ety-recall-title .quote::after {		
		content: "  \f10e";
		font-family: FontAwesome;
		font-size: 20px;
		font-weight: normal;
		vertical-align: bottom;
	}

	.ety-recall .personal-data > .inr {	
		display: flex;
		flex-wrap: wrap;
	}

	.ety-recall .ety-terms-txt {
		padding: 10px 30px 10px 30px;
		font-size: 15px;
		line-height: 22px;
	}


	/* blog - menu top  */

	.blog-cat-select {
		position: relative;
	}

	.blog-cat-select:hover .blog-cat-select-menu {
		display: block;
	}

	.blog-cat-select-menu {
		display: none;
		position: absolute;
		z-index: 99999;
		top: 100%;
		left: 0;
		padding: 10px 0 0 0;	
	}

	.blog-cat-select-menu > .inr {
		background: #fff;
		border-radius: var(--border-radius);
		box-shadow: 0px 0px 12px -6px rgba(0,0,0,0.75);
		color: #444;
		padding: 15px;
	}

	.blog-cat-select-menu > .inr .item {
		padding: 10px;
		white-space: nowrap;
		font-size: 15px;
		font-weight: 600;
		display: block;
		color: #333;
	}

	.blog-cat-select-menu > .inr .item:hover {
		color: var(--main-color);
	}

	/* blog - list */
	
	.blog-list-items {
		display: flex;
		flex-wrap: wrap;
		padding: 0 0 40px 0;
	}

	.blog-list-items > .item {
		flex: 33.333333% 0 0;
		padding: 10px;
	}

	.blog-list-items > .item > .inr {
		display: block;		
	}

	.blog-list-items > .item > .inr > .img {
		display: block;		
	}

	.blog-list-items > .item > .inr > .img img {
		display: block;
		border-radius: var(--border-radius);
	}	

	.blog-list-items > .item > .inr > .title {
		display: block;
		font-size: 24px;
		line-height: 32px;		
		font-weight: 600;
		padding: 12px 0;
		color: #333;
	}

	.blog-list-items > .item > .inr > .title:hover {
		text-decoration: underline;
	}
	
	.blog-list-items > .item > .inr > .cat {
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: 1px;
		font-weight: 600;
		color: #333;
	}

	.blog-list-items > .item > .inr > .description {
		font-size: 16px;	
		line-height: 28px;
		color: #666;
	}

	.blog-list-items > .menu_browse {
		flex: 100% 0 0;
	}

	@media all and (max-width: 800px) {

		.blog-list-items > .item {
			flex: 50% 0 0;			
		}

	}

	@media all and (max-width: 560px) {

		.blog-list-items > .item {
			flex: 100% 0 0;			
		}

	}
	
	/* blog - single */

	.blog-single-item > .inr {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		padding: 0 0 40px 0;
	}

	.blog-single-item > .inr > .top {
		flex: 100% 0 0;
		display: flex;
		align-items: center;
	}

	.blog-single-item > .inr > .top > * {
		flex: 33.333333%;
		padding: 10px;
	}

	.blog-single-item > .inr > .top > .date {
		display: flex;
		justify-content: flex-end;
	}

	.blog-single-item > .inr > .top > .social {
		display: flex;
		justify-content: center;
	}

	.blog-single-item  > .inr > h1 { 	
		font-size: 36px;
		font-weight: 600;
		text-align: center;
		max-width: 700px;
		padding: 30px 10px;			
	}

	.blog-single-item > .inr > .img { 		
		padding: 10px;
		max-width: 800px;
	}

	.blog-single-item > .inr > .img img { 	
		width: 100%;	
		border-radius: var(--border-radius);		
	}

	.blog-single-item > .inr > .description { 		
		padding: 10px;
		font-size: 22px;
		line-height: 38px;
		max-width: 700px;
	}

	.blog-single-item > .inr > .description a { 
		color: var(--sub-color);	
	}

	.blog-single-item > .inr > .description a:hover { 
		text-decoration: underline;
	}

	.blog-single-item > .inr > .bottom {
		flex: 100% 0 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.blog-single-item > .inr > .top > * {		
		padding: 10px;
	}

	.blog-single-similar-title {
		padding: 40px 10px 20px 10px;
		font-size: 36px;
		font-weight: 600;
		text-align: center;
	}
	
	.blog-single-item .social {
		display: flex;	
		margin: -5px;	
	}
	
	.blog-single-item .social > a {
		text-decoration: none;
		padding: 5px;		
	}

	.blog-single-item .social > a::before {
		content: "\f082";
		font-family: FontAwesome;
		display: block;
		color: #888;
		font-size: 26px;
	}

	.blog-single-item .social > a.twitter::before {
		content: "\f081";
	}

	@media all and (max-width: 520px) {

		.blog-single-item h1 {
			font-size: 28px;			
		}

		.blog-single-item > .inr > .top {
			flex-wrap: wrap;
		}

		.blog-single-item > .inr > .top > .social,
		.blog-single-item > .inr > .top > .cat {
			
			flex: 50% 0 0;
		}

		.blog-single-item > .inr > .top > .social {
			order: 10;
			flex: 100% 0 0;
		}

		.blog-single-similar-title {		
			font-size: 28px;			
		}		

	}

	/* progress */

	.form-info-progress {
		position: fixed;
		z-index: 999999999;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba( 0, 0, 0, .4 );
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.form-info-progress .progress-bar {
		width: 300px;
		height: 32px;
		background-color: #fff;
		box-shadow: 0px 0px 15px 2px rgba(0,0,0,0.5);
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: var(--border-radius);
		overflow: hidden;
	}

	.form-info-progress .progress-bar > .inr {
		position: absolute;
		top: 0;
		bottom: 0;		
		left: 0;
		width: 0%;	
		height: 100%;	
		background: var(--main-color);
		transition: width .3s;
	}

	.form-info-progress .progress-bar > .val {
		font-size: 16px;
		font-weight: 600;
		position: relative;
		z-index: 999;
	}	

	/* blog - single - wider */

	.blog-single-item-wider h1 {
		max-width: 900px;		
	}

	.blog-single-item-wider > .inr > .img {
		max-width: 1000px;
	}	

	.blog-single-item-wider > .inr > .img img {
		width: 1000px;
	}		

	.blog-single-item-wider > .inr > .description {		
		max-width: 900px;
	}	

	/* password - forget */

	.password-forget-link {
		padding: 0px 5px;
		display: block;
		font-size: 14px;
		color: var(--sub-color);
	}

	.password-forget-link::before {
		content: "[";
	}

	.password-forget-link::after {
		content: "]";
	}	

	.password-forget-link:hover {
		text-decoration: underline;
	}

	.header-main-mobile	.password-forget-link {
		padding: 0px 10px;
		font-size: 15px;
	}

	/* 404 */

	.section-404 > .inr {
		max-width: 600px;
		padding: 40px 10px 60px 10px;
	}

	.section-404 > .inr > .txt {
		text-align: center;
	}	

	.section-404 > .inr > .txt > .txt-top {
		font-size: 50px;
		line-height: 70px;
		font-weight: bold;
		padding: 0 0 20px 0;
	}

	.section-404 > .inr > .txt > .txt-bottom {
		font-size: 20px;
		line-height: 30px;			
	}

	/* width */

	.flex-50 {
		flex: 50% 0 0;
	}	

	.flex-100 {
		flex: 100% 0 0;
	}	

	/* width - important */

	.flex-auto-i {
		flex: auto 0 0 !important;
	}

	.flex-33-i {
		flex: 33.333333% 0 0 !important;
	}

	.flex-40-i {
		flex: 40% 0 0 !important;
	}

	.flex-50-i {
		flex: 50% 0 0 !important;
	}

	.flex-60-i {
		flex: 60% 0 0 !important;
	}

	.flex-100-i {
		flex: 100% 0 0 !important;
	}

	/* */

	@media all and (max-width: 1100px) {

		/* footer */

		section.footer > .inr {
			flex-wrap: wrap;			
		}
	
		section.footer .copyright {
			flex: 100% 0 0;	
			text-align: center;
		}	

		.menu-bottom {
			flex: 100% 0 0;	
			justify-content: center;
			flex-wrap: wrap;
		}

		/* width */

		.m-1100-flex-50 {
			flex: 50% 0 0;
		}	
	
		.m-1100-flex-100 {
			flex: 100% 0 0;
		}

		/* width - important */

		.m-1100-flex-50-i {
			flex: 50% 0 0 !important;
		}	
	
		.m-1100-flex-100-i {
			flex: 100% 0 0 !important;
		}


	}

	@media all and (max-width: 990px) {

		/* width - important */

		.m-990-flex-50-i {
			flex: 50% 0 0 !important;
		}	
	
		.m-990-flex-100-i {
			flex: 100% 0 0 !important;
		}			

	}

	@media all and (max-width: 880px) {

		section.s2 > .inr {
			flex-wrap: wrap;
		}

		section.s2 > .inr > .left,
		section.s2 > .inr > .right {
			flex: 100% 0 0;	
			text-align: center;		
		}
		
		section.s2 > .inr > .left {
			order: 1;
		}

		section.s2 > .inr > .right {
			order: 0;
		}

		section.s2 > .inr > .right img {
			max-width: 300px;
		}

		section.s2 .txt-top {
			flex: 100% 0 0;
		}

	}

	@media all and (max-width: 800px) {

		/* width - important */

		.m-800-flex-50-i {
			flex: 50% 0 0 !important;
		}	
	
		.m-800-flex-100-i {
			flex: 100% 0 0 !important;
		}
		
		.t2 {
			font-size: 30px;		
		}	
		
		section.s2 .txt-main {
			font-size: 30px;
		}			

		section.s1 > .inr > .left {
			flex: 100% 0 0;		
		}

		section.s1 .txt-main {			
			font-size: 32px;
			line-height: 40px;
		}	


	}

	@media all and (max-width: 640px) {
	
		/* width */

		.m-640-flex-50 {
			flex: 50% 0 0;
		}	
	
		.m-640-flex-100 {
			flex: 100% 0 0;
		}

		/* width - important */

		.m-640-flex-50-i {
			flex: 50% 0 0 !important;
		}	
	
		.m-640-flex-100-i {
			flex: 100% 0 0 !important;
		}	

		.mobile-menu-button {
			display: block;
		}

		.header-main-mobile	{
			display: flex;
		}	
		
		.header-main > .inr > .right {
			display: none;
		}

	}
	
	@media all and (max-width: 400px) {

		section.s1 .button  {			
			flex: 100% 0 0;
		}

		section.s1 .button a  {			
			display: block;
		}	

	}

	.us-n {			
		-webkit-touch-callout: none; 
		-webkit-user-select: none; 
		-khtml-user-select: none; 
		-moz-user-select: none; 
		-ms-user-select: none; 
		user-select: none;  
	}