body {
	display: none;
}

@supports(display: grid) {

	body {
		display: grid;
		background-image:url(images/bg_pattern.jpg);
		background-repeat:repeat;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 1.2rem;
		height: 100vh;
		margin: auto;
	}
	html {
		scroll-behavior: smooth;
	}

	article {
		padding: 8px 14px 14px;
		overflow: hidden;
	}

	article h1 {
		height: 20px;
		margin-left: 12px;
	}
	  
	article p {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 13px;
		text-align: left;
		text-overflow: ellipsis;
		margin-top: 30px;
		margin-left: 12px;
		margin-right: 12px;
	  }

	/*==============================================*/
	/*generic styles*/
	.font-title{
		font-family: 'Oswald', sans-serif;
	}

	.like-pre{
        white-space: pre;
    }

	.col-1 {
		grid-column: 1;
	}
	.col-2 {
		grid-column: 2;
	}
	.col-3 {
		grid-column: 3;
	}
	.col-4 {
		grid-column: 4;
	}
	.col-5 {
		grid-column: 5;
	}
	.col-6 {
		grid-column: 6;
	}
	.col-7 {
		grid-column: 7;
	}
	.col-8 {
		grid-column: 8;
	}
	.col-9 {
		grid-column: 9;
	}
	.col-10 {
		grid-column: 10;
	}
	.col-11 {
		grid-column: 11;
	}
	.col-12 {
		grid-column: 12;
	}

	.row-1 {
		grid-row: 1;
	}
	.row-2 {
		grid-row: 2;
	}
	.row-3 {
		grid-row: 3;
	}
	.row-4 {
		grid-row: 4;
	}
	.row-5 {
		grid-row: 5;
	}
	.row-6 {
		grid-row: 6;
	}

	.text-align-left{
		text-align: left;
	}
	.text-align-right{
		text-align: right;
	}
	.text-align-center{
		text-align: center;
	}
	.text-align-justify{
		text-align: justify;
	}
	.text-size-12{
		font-size: 12px;
	}
	.text-size-13{
		font-size: 12px;
	}
	.text-size-14{
		font-size: 14px;
	}
	.text-size-16{
		font-size: 16px;
	}
	.text-size-22{
		font-size: 22px;
	}
	.text-size-24{
		font-size: 24px;
	}
	
	.orange{
		color: #C8A477;
	}
	.gray{
		color: #B1B1B1;
	}
	.white{
		color: #ffffff;
	}
	.grayscale { 
		filter: grayscale(100%); 
	}
	.opacity-50 {
		 filter: opacity(50%); 
	}

	.marg-top-30{
		margin-top: 30px;	
	}
	.marg-top-40{
		margin-top: 40px;	
	}
	.marg-top-60{
		margin-top: 60px;	
	}
	.marg-top-80{
		margin-top: 80px;	
	}
	.marg-top-100{
		margin-top: 100px;	
	}
	.marg-top-110{
		margin-top: 110px;	
	}
	.marg-top-120{
		margin-top: 120px;	
	}
	.marg-top-150{
		margin-top: 150px;	
	}
	.marg-left-140{
		margin-left: 140px;	
	}
	.marg-left-auto{
		margin-left: auto;	
	}
	.marg-right-auto{
		margin-right: auto;	
	}

	.marg-auto{
		margin: auto;	
	}

	.marg-right-140{
		margin-right: 140px;	
	}
	.line-height-2{
		line-height: 2.0;
	}

	.height-40{
		height: 40px;
	}

	.height-60{
		height: 60px;
	}

	.height-80{
		height: 80px;
	}
	.reset-link{
		text-decoration: none;
	}

	/*==============================================*/

}