/*LAYOUT*/
:root{
	--layout-width: 100%;
	--layout-maxwidth: 1440px;
	--layout-padding: 30px;
}

.fullwidth{
	width: 100%;
	max-width: 100%;
}

.boxed{	
	width: var(--layout-width);
	max-width: var(--layout-maxwidth);
	margin: 0px auto;
}

.nopadding{
	padding: 0px !important;
}

.row{display: flex;}

.column{display: flex; flex-direction: column; width: 100%; padding: 0px 0px;}

/*ALIGNMENT*/
.justify-right{justify-content: end;}
.justify-middle{justify-content: center;}
.align-right{align-items: end;}
.align-middle{align-items: center;}
.text-center{text-align: center;}
.text-right{text-align: right;}
.text-left{text-align: left;}
.text-justify{text-align: justify;}
.block-center{margin: 0px auto;}
.block-right{margin: 0px 0px 0px auto;}

/*TEXT TRANSFORM*/
.text-upper{text-transform: uppercase;}
.text-lower{text-transform: lowercase;}
.text-initial{text-transform: initial;}
.text-capt{text-transform: capitalize;}

/*WIDTH*/
.width-5{width: 4.33%;}
.width-10{width: 9.99%;}
.width-15{width: 14.99%;}
.width-20{width: 19.99%;}
.width-25{width: 24.99%;}
.width-30{width: 29.99%;}
.width-33{width: 32.99%;}
.width-35{width: 34.99%;}
.width-40{width: 39.99%;}
.width-45{width: 44.99%;}
.width-50{width: 49.99%;}
.width-55{width: 54.99%;}
.width-60{width: 59.99%;}
.width-65{width: 64.99%;}
.width-70{width: 69.99%;}
.width-75{width: 74.99%;}
.width-80{width: 79.99%;}
.width-85{width: 84.99%;}
.width-90{width: 89.99%;}
.width-95{width: 94.99%;}
.width-100{width: 100%;}

/*PADDING*/
.top-padding{
	padding-top: var(--layout-padding);
}

.bottom-padding{
	padding-bottom: var(--layout-padding);
}

.right-padding{
	padding-right: var(--layout-padding);	
}

.left-padding{
	padding-left: var(--layout-padding);	
}

.top-nopadding{
	padding-top: 0px !important;
}

.right-nopadding{
	padding-right: 0px !important;
}

.bottom-nopadding{
	padding-bottom: 0px !important;
}

.left-nopadding{
	padding-left: 0px !important;
}

.padded10{
	padding: calc(var(--layout-padding) - 20px);
}

.padded20{
	padding: calc(var(--layout-padding) - 10px);
}

/*MARGIN*/
.top-margin{
	margin-top: var(--layout-padding);
}

.bottom-margin{
	margin-bottom: var(--layout-padding);
}

.right-margin{
	margin-right: var(--layout-padding);	
}

.left-margin{
	margin-left: var(--layout-padding);	
}

.margin10{
	margin: calc(var(--layout-padding) - 20px);
}

.top-nomargin{
	margin-top: 0px !important;
}

.right-nomargin{
	margin-right: 0px !important;
}

.bottom-nomargin{
	margin-bottom: 0px !important;
}

.left-nomargin{
	margin-left: 0px !important;
}

/*FONT SIZES*/
.fs-50{font-size: 50px;}
.fs-48{font-size: 48px;}
.fs-46{font-size: 46px;}
.fs-44{font-size: 44px;}
.fs-42{font-size: 42px;}
.fs-40{font-size: 40px;}
.fs-38{font-size: 38px;}
.fs-36{font-size: 36px;}
.fs-34{font-size: 34px;}
.fs-32{font-size: 32px;}
.fs-30{font-size: 30px;}
.fs-28{font-size: 28px;}
.fs-26{font-size: 26px;}
.fs-24{font-size: 24px;}
.fs-22{font-size: 22px;}
.fs-20{font-size: 20px;}
.fs-18{font-size: 18px;}
.fs-16{font-size: 16px;}
.fs-14{font-size: 14px;}
.fs-12{font-size: 12px;}
.fs-10{font-size: 10px;}
.fs-8{font-size: 8px;}

/*MOBILE*/

@media (max-width: 980px){
	.row{
		flex-direction: column;
	}
	.column{
		width: 100% !important;
	}
	.right-padding{
		padding-right: unset;
	}
    .width-70{width: 100% !important;}
}