/*
    DOT-ELEMENT Dotgrid
    Author: Štefan Miščík
    Website: https://dotsystems.sk/
    Email: info@dotsystems.sk

    Version: 1.0
    
    You can edit as needed, but must preserve the author's header in CSS.
*/

/*
    Another grid system, very easy and super simply.

    Compatible with bootstrap. You can use dot-gird with bootstrap col-* and vice versa.

    <dot-grid wrapped="1"> - Can be also used as wrapper wrapped="1", dwrapped="1", mwrapped="1" - wrapped on both, desktop wrapped or mobile wrapped.
        <div class="col-lg-6"></div>
        <dot-col mobile="6" desktop="12"></div>
    </dot-grid>
*/

dot-grid, dot-row, dot-col {
	--padding-right-val: 15px;
	--padding-left-val: 15px;
	--padding-right-val-col: var(--padding-right-val); /* If we want to set grid row padding to zero, but still can keep inside padding for cols */
	--padding-left-val-col: var(--padding-left-val); /* If we want to set grid row padding to zero, but still can keep inside padding for cols */
	--wrapper-width: 80%; /* If we use wrapper */
	--ldwrapper-width: var(--wrapper-width); /* if we use dwrapper on LARGE desktop */
	--dwrapper-width: var(--wrapper-width); /* if we use dwrapper on desktop */
	--mwrapper-width: var(--wrapper-width); /* if we use mwrapper on mobile */
	--smwrapper-width: var(--wrapper-width); /* if we use mwrapper on small mobile */
}

dot-grid, dot-row {
	display: flex;
	flex-wrap: wrap;
	margin-right: calc(-0.5*var(--padding-right-val));
	margin-left: calc(-0.5*var(--padding-left-val));
	box-sizing: border-box;
}

dot-grid[nomargin="1"], dot-row[nomargin="1"] {
	margin-right: 0;
	margin-left: 0;
}

dot-grid[marginauto="1"], dot-row[marginauto="1"] {
	margin: auto !important;
}

dot-grid[wrapped="1"], dot-row[wrapped="1"] {
	width: var(--wrapper-width,100%);
	margin-right: auto;
	margin-left: auto;
	overflow-x: hidden;
}

dot-col {
	display: block;
	position: relative;
	min-height: 1px;
	padding-right: calc(var(--padding-right-val-col,var(--padding-right-val))*0.5);
	padding-left: calc(var(--padding-left-val-col,--padding-left-val)*0.5);
	flex: 0 0 100%;
    max-width: 100%;
	width: 100%;
}


dot-col[any="1"] {
	width: 8.333333%;
	flex: 0 0 8.333333%;
	max-width: 8.333333%;
}

dot-col[any="2"] {
	width: 16.666667%;
	flex: 0 0 16.666667%;
	max-width: 16.666667%;
}

dot-col[any="3"] {
	width: 25%;
	flex: 0 0 25%;
	max-width: 25%;
}

dot-col[any="4"] {
	width: 33.333333%;
	flex: 0 0 33.333333%;
	max-width: 33.333333%;
}

dot-col[any="5"] {
	width: 41.666667%;
	flex: 0 0 41.666667%;
	max-width: 41.666667%;
}

dot-col[any="6"] {
	width: 50%;
	flex: 0 0 50%;
	max-width: 50%;
}

dot-col[any="7"] {
	width: 58.333333%;
	flex: 0 0 58.333333%;
	max-width: 58.333333%;
}

dot-col[any="8"] {
	width: 66.666667%;
	flex: 0 0 66.666667%;
	max-width: 66.666667%;
}

dot-col[any="9"] {
	width: 75%;
	flex: 0 0 75%;
	max-width: 75%;
}

dot-col[any="10"] {
	width: 83.333333%;
	flex: 0 0 83.333333%;
	max-width: 83.333333%;
}

dot-col[any="11"] {
	width: 91.666667%;
	flex: 0 0 91.666667%;
	max-width: 91.666667%;
}

dot-col[any="12"] {
	width: 100%;
	flex: 0 0 100%;
	max-width: 100%;
}



@media (max-width: 991.98px) { 

	dot-col[mobile="1"] {
		width: 8.333333%;
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}

	dot-col[mobile="2"] {
		width: 16.666667%;
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}

	dot-col[mobile="3"] {
		width: 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}

	dot-col[mobile="4"] {
		width: 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}

	dot-col[mobile="5"] {
		width: 41.666667%;
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}

	dot-col[mobile="6"] {
		width: 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}

	dot-col[mobile="7"] {
		width: 58.333333%;
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}

	dot-col[mobile="8"] {
		width: 66.666667%;
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}

	dot-col[mobile="9"] {
		width: 75%;
		flex: 0 0 75%;
		max-width: 75%;
	}

	dot-col[mobile="10"] {
		width: 83.333333%;
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}

	dot-col[mobile="11"] {
		width: 91.666667%;
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}

	dot-col[mobile="12"] {
		width: 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}


}



@media (max-width: 575.98px) { 

	dot-col[smobile="1"] {
		width: 8.333333%;
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}

	dot-col[smobile="2"] {
		width: 16.666667%;
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}

	dot-col[smobile="3"] {
		width: 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}

	dot-col[smobile="4"] {
		width: 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}

	dot-col[smobile="5"] {
		width: 41.666667%;
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}

	dot-col[smobile="6"] {
		width: 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}

	dot-col[smobile="7"] {
		width: 58.333333%;
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}

	dot-col[smobile="8"] {
		width: 66.666667%;
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}

	dot-col[smobile="9"] {
		width: 75%;
		flex: 0 0 75%;
		max-width: 75%;
	}

	dot-col[smobile="10"] {
		width: 83.333333%;
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}

	dot-col[smobile="11"] {
		width: 91.666667%;
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}

	dot-col[smobile="12"] {
		width: 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}


}



@media (min-width: 992px) { 

	dot-col[desktop="1"] {
		width: 8.333333%;
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}

	dot-col[desktop="2"] {
		width: 16.666667%;
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}

	dot-col[desktop="3"] {
		width: 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}

	dot-col[desktop="4"] {
		width: 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}

	dot-col[desktop="5"] {
		width: 41.666667%;
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}

	dot-col[desktop="6"] {
		width: 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}

	dot-col[desktop="7"] {
		width: 58.333333%;
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}

	dot-col[desktop="8"] {
		width: 66.666667%;
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}

	dot-col[desktop="9"] {
		width: 75%;
		flex: 0 0 75%;
		max-width: 75%;
	}

	dot-col[desktop="10"] {
		width: 83.333333%;
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}

	dot-col[desktop="11"] {
		width: 91.666667%;
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}

	dot-col[desktop="12"] {
		width: 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}


}



@media (min-width: 1200px) { 

	dot-col[ldesktop="1"] {
		width: 8.333333%;
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}

	dot-col[ldesktop="2"] {
		width: 16.666667%;
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}

	dot-col[ldesktop="3"] {
		width: 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}

	dot-col[ldesktop="4"] {
		width: 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}

	dot-col[ldesktop="5"] {
		width: 41.666667%;
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}

	dot-col[ldesktop="6"] {
		width: 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}

	dot-col[ldesktop="7"] {
		width: 58.333333%;
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}

	dot-col[ldesktop="8"] {
		width: 66.666667%;
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}

	dot-col[ldesktop="9"] {
		width: 75%;
		flex: 0 0 75%;
		max-width: 75%;
	}

	dot-col[ldesktop="10"] {
		width: 83.333333%;
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}

	dot-col[ldesktop="11"] {
		width: 91.666667%;
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}

	dot-col[ldesktop="12"] {
		width: 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}


}



@media (min-width: 1400px) { 

	dot-col[xldesktop="1"] {
		width: 8.333333%;
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}

	dot-col[xldesktop="2"] {
		width: 16.666667%;
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}

	dot-col[xldesktop="3"] {
		width: 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}

	dot-col[xldesktop="4"] {
		width: 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}

	dot-col[xldesktop="5"] {
		width: 41.666667%;
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}

	dot-col[xldesktop="6"] {
		width: 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}

	dot-col[xldesktop="7"] {
		width: 58.333333%;
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}

	dot-col[xldesktop="8"] {
		width: 66.666667%;
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}

	dot-col[xldesktop="9"] {
		width: 75%;
		flex: 0 0 75%;
		max-width: 75%;
	}

	dot-col[xldesktop="10"] {
		width: 83.333333%;
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}

	dot-col[xldesktop="11"] {
		width: 91.666667%;
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}

	dot-col[xldesktop="12"] {
		width: 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}


}



@media (min-width: 1800px) { 

	dot-col[xxldesktop="1"] {
		width: 8.333333%;
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}

	dot-col[xxldesktop="2"] {
		width: 16.666667%;
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}

	dot-col[xxldesktop="3"] {
		width: 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}

	dot-col[xxldesktop="4"] {
		width: 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}

	dot-col[xxldesktop="5"] {
		width: 41.666667%;
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}

	dot-col[xxldesktop="6"] {
		width: 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}

	dot-col[xxldesktop="7"] {
		width: 58.333333%;
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}

	dot-col[xxldesktop="8"] {
		width: 66.666667%;
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}

	dot-col[xxldesktop="9"] {
		width: 75%;
		flex: 0 0 75%;
		max-width: 75%;
	}

	dot-col[xxldesktop="10"] {
		width: 83.333333%;
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}

	dot-col[xxldesktop="11"] {
		width: 91.666667%;
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}

	dot-col[xxldesktop="12"] {
		width: 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}


}

/* Exact dimensions styles */

/* SIZE: any */

dot-col[tleft*="any"] {
	text-align: left;
}

dot-col[tcenter*="any"] {
    text-align: center;
}

dot-col[tright*="any"] {
    text-align: right;
}

dot-grid[wrapped*="any"] {
    width: var(--wrapper-width,100%);
    margin-right: auto;
    margin-left: auto;
    overflow-x: hidden;
}

dot-grid[hcenter*="any"], dot-col[hcenter*="any"], [hcenter*="any"] {
	display: flex;
	align-items: center;
}

dot-grid[hcenter*="any"], dot-row[hcenter*="any"] {
	height: 100%;
}

[dg-marginauto*="any"] {
    margin: auto;
}

[dg-marginhcenter*="any"] {
    margin-left: auto;
    margin-right: auto;
}

[dg-margint5*="any"] {
    margin-top: 5px;
}

[dg-marginb5*="any"] {
    margin-bottom: 5px;
}

[dg-paddingt5*="any"] {
    padding-top: 5px;
}

[dg-paddingb5*="any"] {
    padding-bottom: 5px;
}

dot-col[any="0"] {
	position: relative;
	width: 0px;
	display: none;
}

[dg-margint10*="any"] {
    margin-top: 10px;
}

[dg-marginb10*="any"] {
    margin-bottom: 10px;
}

[dg-paddingt10*="any"] {
    padding-top: 10px;
}

[dg-paddingb10*="any"] {
    padding-bottom: 10px;
}

dot-col[any="0"] {
	position: relative;
	width: 0px;
	display: none;
}

[dg-margint15*="any"] {
    margin-top: 15px;
}

[dg-marginb15*="any"] {
    margin-bottom: 15px;
}

[dg-paddingt15*="any"] {
    padding-top: 15px;
}

[dg-paddingb15*="any"] {
    padding-bottom: 15px;
}

dot-col[any="0"] {
	position: relative;
	width: 0px;
	display: none;
}

[dg-margint20*="any"] {
    margin-top: 20px;
}

[dg-marginb20*="any"] {
    margin-bottom: 20px;
}

[dg-paddingt20*="any"] {
    padding-top: 20px;
}

[dg-paddingb20*="any"] {
    padding-bottom: 20px;
}

dot-col[any="0"] {
	position: relative;
	width: 0px;
	display: none;
}

[dg-margint30*="any"] {
    margin-top: 30px;
}

[dg-marginb30*="any"] {
    margin-bottom: 30px;
}

[dg-paddingt30*="any"] {
    padding-top: 30px;
}

[dg-paddingb30*="any"] {
    padding-bottom: 30px;
}

dot-col[any="0"] {
	position: relative;
	width: 0px;
	display: none;
}

[dg-margint40*="any"] {
    margin-top: 40px;
}

[dg-marginb40*="any"] {
    margin-bottom: 40px;
}

[dg-paddingt40*="any"] {
    padding-top: 40px;
}

[dg-paddingb40*="any"] {
    padding-bottom: 40px;
}

dot-col[any="0"] {
	position: relative;
	width: 0px;
	display: none;
}

[dg-margint50*="any"] {
    margin-top: 50px;
}

[dg-marginb50*="any"] {
    margin-bottom: 50px;
}

[dg-paddingt50*="any"] {
    padding-top: 50px;
}

[dg-paddingb50*="any"] {
    padding-bottom: 50px;
}

dot-col[any="0"] {
	position: relative;
	width: 0px;
	display: none;
}

/* SIZE: smobile */



@media (max-width: 575.98px) { 

	dot-col[tleft*="smobile"] {
		text-align: left;
	}
	
	dot-col[tcenter*="smobile"] {
	    text-align: center;
	}
	
	dot-col[tright*="smobile"] {
	    text-align: right;
	}
	
	dot-grid[wrapped*="smobile"] {
	    width: var(--wrapper-width,100%);
	    margin-right: auto;
	    margin-left: auto;
	    overflow-x: hidden;
	}
	
	dot-grid[hcenter*="smobile"], dot-col[hcenter*="smobile"], [hcenter*="smobile"] {
		display: flex;
		align-items: center;
	}
	
	dot-grid[hcenter*="smobile"], dot-row[hcenter*="smobile"] {
		height: 100%;
	}
	
	[dg-marginauto*="smobile"] {
	    margin: auto;
	}
	
	[dg-marginhcenter*="smobile"] {
	    margin-left: auto;
	    margin-right: auto;
	}

	[dg-margint5*="smobile"] {
	    margin-top: 5px;
	}
	
	[dg-marginb5*="smobile"] {
	    margin-bottom: 5px;
	}
	
	[dg-paddingt5*="smobile"] {
	    padding-top: 5px;
	}
	
	[dg-paddingb5*="smobile"] {
	    padding-bottom: 5px;
	}
	
	dot-col[smobile="0"] {
		position: relative;
		width: 0px;
		display: none;
	}

	[dg-margint10*="smobile"] {
	    margin-top: 10px;
	}
	
	[dg-marginb10*="smobile"] {
	    margin-bottom: 10px;
	}
	
	[dg-paddingt10*="smobile"] {
	    padding-top: 10px;
	}
	
	[dg-paddingb10*="smobile"] {
	    padding-bottom: 10px;
	}
	
	dot-col[smobile="0"] {
		position: relative;
		width: 0px;
		display: none;
	}

	[dg-margint15*="smobile"] {
	    margin-top: 15px;
	}
	
	[dg-marginb15*="smobile"] {
	    margin-bottom: 15px;
	}
	
	[dg-paddingt15*="smobile"] {
	    padding-top: 15px;
	}
	
	[dg-paddingb15*="smobile"] {
	    padding-bottom: 15px;
	}
	
	dot-col[smobile="0"] {
		position: relative;
		width: 0px;
		display: none;
	}

	[dg-margint20*="smobile"] {
	    margin-top: 20px;
	}
	
	[dg-marginb20*="smobile"] {
	    margin-bottom: 20px;
	}
	
	[dg-paddingt20*="smobile"] {
	    padding-top: 20px;
	}
	
	[dg-paddingb20*="smobile"] {
	    padding-bottom: 20px;
	}
	
	dot-col[smobile="0"] {
		position: relative;
		width: 0px;
		display: none;
	}

	[dg-margint30*="smobile"] {
	    margin-top: 30px;
	}
	
	[dg-marginb30*="smobile"] {
	    margin-bottom: 30px;
	}
	
	[dg-paddingt30*="smobile"] {
	    padding-top: 30px;
	}
	
	[dg-paddingb30*="smobile"] {
	    padding-bottom: 30px;
	}
	
	dot-col[smobile="0"] {
		position: relative;
		width: 0px;
		display: none;
	}

	[dg-margint40*="smobile"] {
	    margin-top: 40px;
	}
	
	[dg-marginb40*="smobile"] {
	    margin-bottom: 40px;
	}
	
	[dg-paddingt40*="smobile"] {
	    padding-top: 40px;
	}
	
	[dg-paddingb40*="smobile"] {
	    padding-bottom: 40px;
	}
	
	dot-col[smobile="0"] {
		position: relative;
		width: 0px;
		display: none;
	}

	[dg-margint50*="smobile"] {
	    margin-top: 50px;
	}
	
	[dg-marginb50*="smobile"] {
	    margin-bottom: 50px;
	}
	
	[dg-paddingt50*="smobile"] {
	    padding-top: 50px;
	}
	
	[dg-paddingb50*="smobile"] {
	    padding-bottom: 50px;
	}
	
	dot-col[smobile="0"] {
		position: relative;
		width: 0px;
		display: none;
	}


}

/* SIZE: mobile */



@media (max-width: 576px) and (max-width: 991.98px) { 

	dot-col[tleft*="mobile"] {
		text-align: left;
	}
	
	dot-col[tcenter*="mobile"] {
	    text-align: center;
	}
	
	dot-col[tright*="mobile"] {
	    text-align: right;
	}
	
	dot-grid[wrapped*="mobile"] {
	    width: var(--wrapper-width,100%);
	    margin-right: auto;
	    margin-left: auto;
	    overflow-x: hidden;
	}
	
	dot-grid[hcenter*="mobile"], dot-col[hcenter*="mobile"], [hcenter*="mobile"] {
		display: flex;
		align-items: center;
	}
	
	dot-grid[hcenter*="mobile"], dot-row[hcenter*="mobile"] {
		height: 100%;
	}
	
	[dg-marginauto*="mobile"] {
	    margin: auto;
	}
	
	[dg-marginhcenter*="mobile"] {
	    margin-left: auto;
	    margin-right: auto;
	}

	[dg-margint5*="mobile"] {
	    margin-top: 5px;
	}
	
	[dg-marginb5*="mobile"] {
	    margin-bottom: 5px;
	}
	
	[dg-paddingt5*="mobile"] {
	    padding-top: 5px;
	}
	
	[dg-paddingb5*="mobile"] {
	    padding-bottom: 5px;
	}
	
	dot-col[mobile="0"] {
		position: relative;
		width: 0px;
		display: none;
	}

	[dg-margint10*="mobile"] {
	    margin-top: 10px;
	}
	
	[dg-marginb10*="mobile"] {
	    margin-bottom: 10px;
	}
	
	[dg-paddingt10*="mobile"] {
	    padding-top: 10px;
	}
	
	[dg-paddingb10*="mobile"] {
	    padding-bottom: 10px;
	}
	
	dot-col[mobile="0"] {
		position: relative;
		width: 0px;
		display: none;
	}

	[dg-margint15*="mobile"] {
	    margin-top: 15px;
	}
	
	[dg-marginb15*="mobile"] {
	    margin-bottom: 15px;
	}
	
	[dg-paddingt15*="mobile"] {
	    padding-top: 15px;
	}
	
	[dg-paddingb15*="mobile"] {
	    padding-bottom: 15px;
	}
	
	dot-col[mobile="0"] {
		position: relative;
		width: 0px;
		display: none;
	}

	[dg-margint20*="mobile"] {
	    margin-top: 20px;
	}
	
	[dg-marginb20*="mobile"] {
	    margin-bottom: 20px;
	}
	
	[dg-paddingt20*="mobile"] {
	    padding-top: 20px;
	}
	
	[dg-paddingb20*="mobile"] {
	    padding-bottom: 20px;
	}
	
	dot-col[mobile="0"] {
		position: relative;
		width: 0px;
		display: none;
	}

	[dg-margint30*="mobile"] {
	    margin-top: 30px;
	}
	
	[dg-marginb30*="mobile"] {
	    margin-bottom: 30px;
	}
	
	[dg-paddingt30*="mobile"] {
	    padding-top: 30px;
	}
	
	[dg-paddingb30*="mobile"] {
	    padding-bottom: 30px;
	}
	
	dot-col[mobile="0"] {
		position: relative;
		width: 0px;
		display: none;
	}

	[dg-margint40*="mobile"] {
	    margin-top: 40px;
	}
	
	[dg-marginb40*="mobile"] {
	    margin-bottom: 40px;
	}
	
	[dg-paddingt40*="mobile"] {
	    padding-top: 40px;
	}
	
	[dg-paddingb40*="mobile"] {
	    padding-bottom: 40px;
	}
	
	dot-col[mobile="0"] {
		position: relative;
		width: 0px;
		display: none;
	}

	[dg-margint50*="mobile"] {
	    margin-top: 50px;
	}
	
	[dg-marginb50*="mobile"] {
	    margin-bottom: 50px;
	}
	
	[dg-paddingt50*="mobile"] {
	    padding-top: 50px;
	}
	
	[dg-paddingb50*="mobile"] {
	    padding-bottom: 50px;
	}
	
	dot-col[mobile="0"] {
		position: relative;
		width: 0px;
		display: none;
	}


}

/* SIZE: desktop */



@media (min-width: 992px) and (max-width: 1199.98px) { 

	dot-col[tleft*="desktop"] {
		text-align: left;
	}
	
	dot-col[tcenter*="desktop"] {
	    text-align: center;
	}
	
	dot-col[tright*="desktop"] {
	    text-align: right;
	}
	
	dot-grid[wrapped*="desktop"] {
	    width: var(--wrapper-width,100%);
	    margin-right: auto;
	    margin-left: auto;
	    overflow-x: hidden;
	}
	
	dot-grid[hcenter*="desktop"], dot-col[hcenter*="desktop"], [hcenter*="desktop"] {
		display: flex;
		align-items: center;
	}
	
	dot-grid[hcenter*="desktop"], dot-row[hcenter*="desktop"] {
		height: 100%;
	}
	
	[dg-marginauto*="desktop"] {
	    margin: auto;
	}
	
	[dg-marginhcenter*="desktop"] {
	    margin-left: auto;
	    margin-right: auto;
	}

	[dg-margint5*="desktop"] {
	    margin-top: 5px;
	}
	
	[dg-marginb5*="desktop"] {
	    margin-bottom: 5px;
	}
	
	[dg-paddingt5*="desktop"] {
	    padding-top: 5px;
	}
	
	[dg-paddingb5*="desktop"] {
	    padding-bottom: 5px;
	}
	
	dot-col[desktop="0"] {
		position: relative;
		width: 0px;
		display: none;
	}

	[dg-margint10*="desktop"] {
	    margin-top: 10px;
	}
	
	[dg-marginb10*="desktop"] {
	    margin-bottom: 10px;
	}
	
	[dg-paddingt10*="desktop"] {
	    padding-top: 10px;
	}
	
	[dg-paddingb10*="desktop"] {
	    padding-bottom: 10px;
	}
	
	dot-col[desktop="0"] {
		position: relative;
		width: 0px;
		display: none;
	}

	[dg-margint15*="desktop"] {
	    margin-top: 15px;
	}
	
	[dg-marginb15*="desktop"] {
	    margin-bottom: 15px;
	}
	
	[dg-paddingt15*="desktop"] {
	    padding-top: 15px;
	}
	
	[dg-paddingb15*="desktop"] {
	    padding-bottom: 15px;
	}
	
	dot-col[desktop="0"] {
		position: relative;
		width: 0px;
		display: none;
	}

	[dg-margint20*="desktop"] {
	    margin-top: 20px;
	}
	
	[dg-marginb20*="desktop"] {
	    margin-bottom: 20px;
	}
	
	[dg-paddingt20*="desktop"] {
	    padding-top: 20px;
	}
	
	[dg-paddingb20*="desktop"] {
	    padding-bottom: 20px;
	}
	
	dot-col[desktop="0"] {
		position: relative;
		width: 0px;
		display: none;
	}

	[dg-margint30*="desktop"] {
	    margin-top: 30px;
	}
	
	[dg-marginb30*="desktop"] {
	    margin-bottom: 30px;
	}
	
	[dg-paddingt30*="desktop"] {
	    padding-top: 30px;
	}
	
	[dg-paddingb30*="desktop"] {
	    padding-bottom: 30px;
	}
	
	dot-col[desktop="0"] {
		position: relative;
		width: 0px;
		display: none;
	}

	[dg-margint40*="desktop"] {
	    margin-top: 40px;
	}
	
	[dg-marginb40*="desktop"] {
	    margin-bottom: 40px;
	}
	
	[dg-paddingt40*="desktop"] {
	    padding-top: 40px;
	}
	
	[dg-paddingb40*="desktop"] {
	    padding-bottom: 40px;
	}
	
	dot-col[desktop="0"] {
		position: relative;
		width: 0px;
		display: none;
	}

	[dg-margint50*="desktop"] {
	    margin-top: 50px;
	}
	
	[dg-marginb50*="desktop"] {
	    margin-bottom: 50px;
	}
	
	[dg-paddingt50*="desktop"] {
	    padding-top: 50px;
	}
	
	[dg-paddingb50*="desktop"] {
	    padding-bottom: 50px;
	}
	
	dot-col[desktop="0"] {
		position: relative;
		width: 0px;
		display: none;
	}


}

/* SIZE: ldesktop */



@media (min-width: 1200px) and (max-width: 1399.98px) { 

	dot-col[tleft*="ldesktop"] {
		text-align: left;
	}
	
	dot-col[tcenter*="ldesktop"] {
	    text-align: center;
	}
	
	dot-col[tright*="ldesktop"] {
	    text-align: right;
	}
	
	dot-grid[wrapped*="ldesktop"] {
	    width: var(--wrapper-width,100%);
	    margin-right: auto;
	    margin-left: auto;
	    overflow-x: hidden;
	}
	
	dot-grid[hcenter*="ldesktop"], dot-col[hcenter*="ldesktop"], [hcenter*="ldesktop"] {
		display: flex;
		align-items: center;
	}
	
	dot-grid[hcenter*="ldesktop"], dot-row[hcenter*="ldesktop"] {
		height: 100%;
	}
	
	[dg-marginauto*="ldesktop"] {
	    margin: auto;
	}
	
	[dg-marginhcenter*="ldesktop"] {
	    margin-left: auto;
	    margin-right: auto;
	}

	[dg-margint5*="ldesktop"] {
	    margin-top: 5px;
	}
	
	[dg-marginb5*="ldesktop"] {
	    margin-bottom: 5px;
	}
	
	[dg-paddingt5*="ldesktop"] {
	    padding-top: 5px;
	}
	
	[dg-paddingb5*="ldesktop"] {
	    padding-bottom: 5px;
	}
	
	dot-col[ldesktop="0"] {
		position: relative;
		width: 0px;
		display: none;
	}

	[dg-margint10*="ldesktop"] {
	    margin-top: 10px;
	}
	
	[dg-marginb10*="ldesktop"] {
	    margin-bottom: 10px;
	}
	
	[dg-paddingt10*="ldesktop"] {
	    padding-top: 10px;
	}
	
	[dg-paddingb10*="ldesktop"] {
	    padding-bottom: 10px;
	}
	
	dot-col[ldesktop="0"] {
		position: relative;
		width: 0px;
		display: none;
	}

	[dg-margint15*="ldesktop"] {
	    margin-top: 15px;
	}
	
	[dg-marginb15*="ldesktop"] {
	    margin-bottom: 15px;
	}
	
	[dg-paddingt15*="ldesktop"] {
	    padding-top: 15px;
	}
	
	[dg-paddingb15*="ldesktop"] {
	    padding-bottom: 15px;
	}
	
	dot-col[ldesktop="0"] {
		position: relative;
		width: 0px;
		display: none;
	}

	[dg-margint20*="ldesktop"] {
	    margin-top: 20px;
	}
	
	[dg-marginb20*="ldesktop"] {
	    margin-bottom: 20px;
	}
	
	[dg-paddingt20*="ldesktop"] {
	    padding-top: 20px;
	}
	
	[dg-paddingb20*="ldesktop"] {
	    padding-bottom: 20px;
	}
	
	dot-col[ldesktop="0"] {
		position: relative;
		width: 0px;
		display: none;
	}

	[dg-margint30*="ldesktop"] {
	    margin-top: 30px;
	}
	
	[dg-marginb30*="ldesktop"] {
	    margin-bottom: 30px;
	}
	
	[dg-paddingt30*="ldesktop"] {
	    padding-top: 30px;
	}
	
	[dg-paddingb30*="ldesktop"] {
	    padding-bottom: 30px;
	}
	
	dot-col[ldesktop="0"] {
		position: relative;
		width: 0px;
		display: none;
	}

	[dg-margint40*="ldesktop"] {
	    margin-top: 40px;
	}
	
	[dg-marginb40*="ldesktop"] {
	    margin-bottom: 40px;
	}
	
	[dg-paddingt40*="ldesktop"] {
	    padding-top: 40px;
	}
	
	[dg-paddingb40*="ldesktop"] {
	    padding-bottom: 40px;
	}
	
	dot-col[ldesktop="0"] {
		position: relative;
		width: 0px;
		display: none;
	}

	[dg-margint50*="ldesktop"] {
	    margin-top: 50px;
	}
	
	[dg-marginb50*="ldesktop"] {
	    margin-bottom: 50px;
	}
	
	[dg-paddingt50*="ldesktop"] {
	    padding-top: 50px;
	}
	
	[dg-paddingb50*="ldesktop"] {
	    padding-bottom: 50px;
	}
	
	dot-col[ldesktop="0"] {
		position: relative;
		width: 0px;
		display: none;
	}


}

/* SIZE: xldesktop */



@media (min-width: 1400px) and (max-width: 1799.98px) { 

	dot-col[tleft*="xldesktop"] {
		text-align: left;
	}
	
	dot-col[tcenter*="xldesktop"] {
	    text-align: center;
	}
	
	dot-col[tright*="xldesktop"] {
	    text-align: right;
	}
	
	dot-grid[wrapped*="xldesktop"] {
	    width: var(--wrapper-width,100%);
	    margin-right: auto;
	    margin-left: auto;
	    overflow-x: hidden;
	}
	
	dot-grid[hcenter*="xldesktop"], dot-col[hcenter*="xldesktop"], [hcenter*="xldesktop"] {
		display: flex;
		align-items: center;
	}
	
	dot-grid[hcenter*="xldesktop"], dot-row[hcenter*="xldesktop"] {
		height: 100%;
	}
	
	[dg-marginauto*="xldesktop"] {
	    margin: auto;
	}
	
	[dg-marginhcenter*="xldesktop"] {
	    margin-left: auto;
	    margin-right: auto;
	}

	[dg-margint5*="xldesktop"] {
	    margin-top: 5px;
	}
	
	[dg-marginb5*="xldesktop"] {
	    margin-bottom: 5px;
	}
	
	[dg-paddingt5*="xldesktop"] {
	    padding-top: 5px;
	}
	
	[dg-paddingb5*="xldesktop"] {
	    padding-bottom: 5px;
	}
	
	dot-col[xldesktop="0"] {
		position: relative;
		width: 0px;
		display: none;
	}

	[dg-margint10*="xldesktop"] {
	    margin-top: 10px;
	}
	
	[dg-marginb10*="xldesktop"] {
	    margin-bottom: 10px;
	}
	
	[dg-paddingt10*="xldesktop"] {
	    padding-top: 10px;
	}
	
	[dg-paddingb10*="xldesktop"] {
	    padding-bottom: 10px;
	}
	
	dot-col[xldesktop="0"] {
		position: relative;
		width: 0px;
		display: none;
	}

	[dg-margint15*="xldesktop"] {
	    margin-top: 15px;
	}
	
	[dg-marginb15*="xldesktop"] {
	    margin-bottom: 15px;
	}
	
	[dg-paddingt15*="xldesktop"] {
	    padding-top: 15px;
	}
	
	[dg-paddingb15*="xldesktop"] {
	    padding-bottom: 15px;
	}
	
	dot-col[xldesktop="0"] {
		position: relative;
		width: 0px;
		display: none;
	}

	[dg-margint20*="xldesktop"] {
	    margin-top: 20px;
	}
	
	[dg-marginb20*="xldesktop"] {
	    margin-bottom: 20px;
	}
	
	[dg-paddingt20*="xldesktop"] {
	    padding-top: 20px;
	}
	
	[dg-paddingb20*="xldesktop"] {
	    padding-bottom: 20px;
	}
	
	dot-col[xldesktop="0"] {
		position: relative;
		width: 0px;
		display: none;
	}

	[dg-margint30*="xldesktop"] {
	    margin-top: 30px;
	}
	
	[dg-marginb30*="xldesktop"] {
	    margin-bottom: 30px;
	}
	
	[dg-paddingt30*="xldesktop"] {
	    padding-top: 30px;
	}
	
	[dg-paddingb30*="xldesktop"] {
	    padding-bottom: 30px;
	}
	
	dot-col[xldesktop="0"] {
		position: relative;
		width: 0px;
		display: none;
	}

	[dg-margint40*="xldesktop"] {
	    margin-top: 40px;
	}
	
	[dg-marginb40*="xldesktop"] {
	    margin-bottom: 40px;
	}
	
	[dg-paddingt40*="xldesktop"] {
	    padding-top: 40px;
	}
	
	[dg-paddingb40*="xldesktop"] {
	    padding-bottom: 40px;
	}
	
	dot-col[xldesktop="0"] {
		position: relative;
		width: 0px;
		display: none;
	}

	[dg-margint50*="xldesktop"] {
	    margin-top: 50px;
	}
	
	[dg-marginb50*="xldesktop"] {
	    margin-bottom: 50px;
	}
	
	[dg-paddingt50*="xldesktop"] {
	    padding-top: 50px;
	}
	
	[dg-paddingb50*="xldesktop"] {
	    padding-bottom: 50px;
	}
	
	dot-col[xldesktop="0"] {
		position: relative;
		width: 0px;
		display: none;
	}


}

/* SIZE: xxldesktop */



@media (min-width: 1800px) { 

	dot-col[tleft*="xxldesktop"] {
		text-align: left;
	}
	
	dot-col[tcenter*="xxldesktop"] {
	    text-align: center;
	}
	
	dot-col[tright*="xxldesktop"] {
	    text-align: right;
	}
	
	dot-grid[wrapped*="xxldesktop"] {
	    width: var(--wrapper-width,100%);
	    margin-right: auto;
	    margin-left: auto;
	    overflow-x: hidden;
	}
	
	dot-grid[hcenter*="xxldesktop"], dot-col[hcenter*="xxldesktop"], [hcenter*="xxldesktop"] {
		display: flex;
		align-items: center;
	}
	
	dot-grid[hcenter*="xxldesktop"], dot-row[hcenter*="xxldesktop"] {
		height: 100%;
	}
	
	[dg-marginauto*="xxldesktop"] {
	    margin: auto;
	}
	
	[dg-marginhcenter*="xxldesktop"] {
	    margin-left: auto;
	    margin-right: auto;
	}

	[dg-margint5*="xxldesktop"] {
	    margin-top: 5px;
	}
	
	[dg-marginb5*="xxldesktop"] {
	    margin-bottom: 5px;
	}
	
	[dg-paddingt5*="xxldesktop"] {
	    padding-top: 5px;
	}
	
	[dg-paddingb5*="xxldesktop"] {
	    padding-bottom: 5px;
	}
	
	dot-col[xxldesktop="0"] {
		position: relative;
		width: 0px;
		display: none;
	}

	[dg-margint10*="xxldesktop"] {
	    margin-top: 10px;
	}
	
	[dg-marginb10*="xxldesktop"] {
	    margin-bottom: 10px;
	}
	
	[dg-paddingt10*="xxldesktop"] {
	    padding-top: 10px;
	}
	
	[dg-paddingb10*="xxldesktop"] {
	    padding-bottom: 10px;
	}
	
	dot-col[xxldesktop="0"] {
		position: relative;
		width: 0px;
		display: none;
	}

	[dg-margint15*="xxldesktop"] {
	    margin-top: 15px;
	}
	
	[dg-marginb15*="xxldesktop"] {
	    margin-bottom: 15px;
	}
	
	[dg-paddingt15*="xxldesktop"] {
	    padding-top: 15px;
	}
	
	[dg-paddingb15*="xxldesktop"] {
	    padding-bottom: 15px;
	}
	
	dot-col[xxldesktop="0"] {
		position: relative;
		width: 0px;
		display: none;
	}

	[dg-margint20*="xxldesktop"] {
	    margin-top: 20px;
	}
	
	[dg-marginb20*="xxldesktop"] {
	    margin-bottom: 20px;
	}
	
	[dg-paddingt20*="xxldesktop"] {
	    padding-top: 20px;
	}
	
	[dg-paddingb20*="xxldesktop"] {
	    padding-bottom: 20px;
	}
	
	dot-col[xxldesktop="0"] {
		position: relative;
		width: 0px;
		display: none;
	}

	[dg-margint30*="xxldesktop"] {
	    margin-top: 30px;
	}
	
	[dg-marginb30*="xxldesktop"] {
	    margin-bottom: 30px;
	}
	
	[dg-paddingt30*="xxldesktop"] {
	    padding-top: 30px;
	}
	
	[dg-paddingb30*="xxldesktop"] {
	    padding-bottom: 30px;
	}
	
	dot-col[xxldesktop="0"] {
		position: relative;
		width: 0px;
		display: none;
	}

	[dg-margint40*="xxldesktop"] {
	    margin-top: 40px;
	}
	
	[dg-marginb40*="xxldesktop"] {
	    margin-bottom: 40px;
	}
	
	[dg-paddingt40*="xxldesktop"] {
	    padding-top: 40px;
	}
	
	[dg-paddingb40*="xxldesktop"] {
	    padding-bottom: 40px;
	}
	
	dot-col[xxldesktop="0"] {
		position: relative;
		width: 0px;
		display: none;
	}

	[dg-margint50*="xxldesktop"] {
	    margin-top: 50px;
	}
	
	[dg-marginb50*="xxldesktop"] {
	    margin-bottom: 50px;
	}
	
	[dg-paddingt50*="xxldesktop"] {
	    padding-top: 50px;
	}
	
	[dg-paddingb50*="xxldesktop"] {
	    padding-bottom: 50px;
	}
	
	dot-col[xxldesktop="0"] {
		position: relative;
		width: 0px;
		display: none;
	}


}


/* OTHER SETTINGS NEDDED FOR GRID COMPATIBILITY */

*, ::before, ::after {
	box-sizing: border-box;
}

BODY {
	margin: 0px;
	width: 100%;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
}

a {
	text-decoration: none;
	color: white;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0px;
	margin-top: 0;
	margin-bottom: 0.5rem;
	font-weight: 500;
	line-height: 1.2;
}

h1 {
	font-size: 2.5rem;
}

h2 {
	font-size: 2rem;
}

h3 {
	font-size: 1.75rem;
}

h4 {
	font-size: 1.5rem;
}

h5 {
	font-size: 1.25rem;
}

h6 {
	font-size: 1rem;
}

p {
	margin-top: 0;
	margin-bottom: 1rem;
}

blockquote {
	margin: 0 0 1rem;
}

ul, ol {
	margin-top: 0;
	margin-bottom: 1rem;
	padding-left: 2rem;
	list-style: none;
}

li {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

dl {
	margin-top: 0;
	margin-bottom: 1rem;
}

code {
	font-family: monospace, monospace;
	font-size: 87.5%;
	word-wrap: break-word;
}

pre {
	display: block;
	font-size: 87.5%;
	border-radius: 0.25rem;
	padding: 0.5rem;
	overflow: auto;
}

img {
	vertical-align: middle;
	border-style: none;
}

table {
	width: 100%;
	margin-bottom: 1rem;
	border-collapse: collapse;
}

th, td {
	padding: 0.75rem;
	vertical-align: top;
}

thead th {
	vertical-align: bottom;
}

input, textarea, select, button {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

input, textarea, select {
	display: block;
	width: 100%;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	color: #494c57;
	background-color: #fff;
	border: 1px solid #d3ceda;
	border-radius: 0.25rem;
}

button {
	display: inline-block;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	color: #fff;
	background-color: hsl(212, 81%, 25%);
	border: 1px solid transparent;
	border-radius: 0.25rem;
}