/* CSS BASIC --------------------------------------------- */

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	}

*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	}

:focus {
    outline: 0;
}

/* CSS BASIC --------------------------------------------- */
 
body {
	-webkit-text-size-adjust: 100.00%;
	-khtml-text-size-adjust: 100.00%;
	-moz-text-size-adjust: 100.00%;
    -ms-text-size-adjust: 100.00%;
	-o-text-size-adjust: 100.00%;
	text-size-adjust: 100.00%;
	
	-webkit-font-smoothing: antialiased;
	-khtml-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	font-smoothing: antialiased;
	}

body.hyphens {
	/* hyphens */
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	
	/* FF Font Weight */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
  
/* CSS BASIC --------------------------------------------- */

html,
body {
	margin: 0;
	padding: 0;
	width: 100.00%;
	}

/* CSS BASIC --------------------------------------------- */

body {
	position: relative;
	min-height: 100.00vh;
	
	display: -moz-box;
	display: -webkit-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: -o-flex;
	display: flex;
		
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	flex-direction: column;
}

/* CSS BASIC --------------------------------------------- */

.flxwrap,
.flxrow,
.flxcol {
	display: -moz-box;
	display: -webkit-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: -o-flex;
	display: flex;
	position: relative;
}

.flxwrap {
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
}

.flxrow {
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	-ms-flex-direction: row;
	-o-flex-direction: row;
	flex-direction: row;
}

.flxcol {
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	flex-direction: column;
}

/* CSS BASIC --------------------------------------------- */

.flxwrap.columns .flxwrap.columns {
    flex: 1;
}

.flxwrap.columns > .flxcol {
    width: 100.00%;
}

/* TYPO3 --------------------------------------------- */


/* CSS BASIC --------------------------------------------- */

.columns {
    margin: 0 -1.00em;
    /*border: 1px dotted green;*/
}
    
.columns > .column,
.columns > details > .column {
    /*border: 1px dotted orange;*/
    padding: 1.00em;
}

.column > .columns,
.column > .frame-type-sollisticobasic_gridelement > .columns {
    margin: -1.00em;
}

.columns > .column.col-auto {
    flex: 1;
    width: auto;
}

/* CSS BASIC --------------------------------------------- */

.gridwrap.columns {
    display: grid;
}

.gridwrap.columns > .column {
    flex: 1;
}

/* CSS BASIC --------------------------------------------- */

.inner-col {
    display: flex;
    flex: 1;
    flex-direction: column;
    /*border: 1px dotted black;*/
}

.inner-col > .columns {
    margin: -1.00em;
}

/**/

.columns > .column.col-min-20 {
    width: 20.00%;
}
.columns > .column.col-min-25 {
    width: 25.00%;
}
.columns > .column.col-min-33 {
    width: 33.33%;
}    
.columns > .column.col-min-50 {
    width: 50.00%;
}
.columns > .column.col-min-66 {
    width: 66.66%;
}
.columns > .column.col-min-75 {
    width: 75.00%;
}
.columns > .column.col-min-80 {
    width: 80.00%;
}

/* 500px - 768px: iPads, Tablets........................................| xsmall */
@media (min-width: 500px) {
    
    .columns > .column.col-xs-20 {
        width: 20.00%;
    }
    
    .columns > .column.col-xs-25 {
        width: 25.00%;
    }
    
    .columns > .column.col-xs-33 {
        width: 33.33%;
    }
    
    .columns > .column.col-xs-50 {
        width: 50.00%;
    }
    
    .columns > .column.col-xs-66 {
        width: 66.66%;
    }
    
    .columns > .column.col-xs-75 {
        width: 75.00%;
    }
    
    .columns > .column.col-xs-80 {
        width: 80.00%;
    }
    
}

/* 768px - 1024px: Small screens, laptops...............................| small */
@media (min-width: 768px) {
    
    .columns > .column.col-s-20 {
        width: 20.00%;
    }
    
    .columns > .column.col-s-25 {
        width: 25.00%;
    }
    
    .columns > .column.col-s-33 {
        width: 33.33%;
    }
    
    .columns > .column.col-s-50 {
        width: 50.00%;
    }
    
    .columns > .column.col-s-66 {
        width: 66.66%;
    }
    
    .columns > .column.col-s-75 {
        width: 75.00%;
    }
    
    .columns > .column.col-s-80 {
        width: 80.00%;
    }
    
    .gridwrap.columns.grid-s-33 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .gridwrap.columns.grid-s-50 {
        grid-template-columns: repeat(2, 1fr);
    }
    
}

/* 1024px - 1200px: Desktops, large screens.............................| medium */
@media (min-width: 1024px) {

    .columns > .column.col-m-20 {
        width: 20.00%;
    }
    
    .columns > .column.col-m-25 {
        width: 25.00%;
    }
    
    .columns > .column.col-m-30 {
        width: 30.00%;
    }
    
    .columns > .column.col-m-33 {
        width: 33.33%;
    }
    
    .columns > .column.col-m-40 {
        width: 40.00%;
    }
    
    .columns > .column.col-m-50 {
        width: 50.00%;
    }
    
    .columns > .column.col-m-66 {
        width: 66.66%;
    }
    
    .columns > .column.col-m-75 {
        width: 75.00%;
    }
    
    .columns > .column.col-m-80 {
        width: 80.00%;
    }
    
    .gridwrap.columns.grid-m-25 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .gridwrap.columns.grid-m-33 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .gridwrap.columns.grid-m-50 {
        grid-template-columns: repeat(2, 1fr);
    }
    
}

/* 1200px and more - Extra large screens, TV............................| large */
@media (min-width: 1200px) {
    
    .columns > .column.col-l-20 {
        width: 20.00%;
    }
    
    .columns > .column.col-l-25 {
        width: 25.00%;
    }
    
    .columns > .column.col-l-30 {
        width: 30.00%;
    }
    
    .columns > .column.col-l-33 {
        width: 33.33%;
    }
    
    .columns > .column.col-l-40 {
        width: 40.00%;
    }
    
    .columns > .column.col-l-50 {
        width: 50.00%;
    }
    
    .columns > .column.col-l-66 {
        width: 66.66%;
    }
    
    .columns > .column.col-l-75 {
        width: 75.00%;
    }
    
    .columns > .column.col-l-80 {
        width: 80.00%;
    }
    
    .gridwrap.columns.grid-l-25 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .gridwrap.columns.grid-l-33 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .gridwrap.columns.grid-l-50 {
        grid-template-columns: repeat(2, 1fr);
    }
    
}

/* Extra large devices (extralarge desktops, 1600px and up).............| xlarge */
@media (min-width: 1600px) {
}


/* CSS BASIC --------------------------------------------- */

figure {
    line-height: 0;
}

figure figcaption,
figure.video > div.video-embed > div {
    line-height: 1.33em;
}

figure img,
figure video {
    max-width: 100.00%;
    height: auto;
}

/* CSS BASIC --------------------------------------------- */
/* CSS BASIC --------------------------------------------- */
/* CSS BASIC --------------------------------------------- */
/* CSS BASIC --------------------------------------------- */