/* ---------------- layout */

html{
	-webkit-backface-visibility: hidden;
	width:100%;
	height: 100%;
}
body {
	-webkit-font-smoothing:antialiased;
}

.container{
	position: relative;
	width: 90%;
	/*max-width: 1024px;*/
	margin: 0 auto;
}
.container_individual{
	position: relative;
	width: calc(90% + 2 * var(--template-preview-margin));
	margin: 0 auto;
}

/* margin */

.margin{
	margin-left: var(--col-margin);
	margin-right: var(--col-margin);
	margin-top: var(--row-margin);
	margin-bottom: var(--row-margin);
}

.col_margin{
	margin-top: var(--col-margin);
	margin-bottom: var(--col-margin);
}
.row_margin{
	margin-left: var(--row-margin);
	margin-right: var(--row-margin);
}
.row_margin_small{
	margin-left: calc(var(--row-margin) / 2);
	margin-right: calc(var(--row-margin) / 2);
}
.row_margin_medium{
	margin-left: calc(var(--row-margin) * 4);
	margin-right: calc(var(--row-margin) * 4);
}
.row_margin_big{
	margin-left: calc(var(--row-margin) * 8);
	margin-right: calc(var(--row-margin) * 8);
}
.margin_top{
	margin-top: var(--margin-top);
}
.margin_top_small{
	margin-top: calc(var(--margin-top)/2);
}
.margin_top_med{
	margin-top: calc(var(--margin-top) * 2);
}
.margin_top_big{
	margin-top: calc(var(--margin-top) * 4);
}
.margin_bottom{
	margin-bottom: var(--margin-bottom);
}
.margin_bottom_small{
	margin-bottom: calc(var(--margin-bottom) / 2);
}
.margin_bottom_med{
	margin-bottom: calc(var(--margin-bottom) * 3);
}
.margin_bottom_big{
	margin-bottom: calc(var(--margin-bottom) * 4);
}
.margin_vertical{
	margin-top: var(--margin-top);
	margin-bottom: var(--margin-bottom);
}
.margin_vertical_small{
	margin-top: calc(var(--margin-top) / 2);
	margin-bottom: calc(var(--margin-bottom) / 2);
}
.margin_vertical_big{
	margin-top: calc(var(--margin-top) * 1.8);
	margin-bottom: calc(var(--margin-bottom) * 1.8);
}
.no_margin{
	margin: 0 !important;
}
.no_vertical_margin{
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* padding */

.padding{
	padding-left: var(--padding-left);
	padding-right: var(--padding-right);
	padding-top: var(--padding-top);
	padding-bottom: var(--padding-bottom);
}
.no_padding{
	padding: 0 !important;
}
.col_padding{
	padding-top: var(--col-padding);
	padding-bottom: var(--col-padding);
}
.row_padding{
	padding-left: var(--row-padding);
	padding-right: var(--row-padding);
}
.padding_top{
	padding-top: var(--padding-top);
}
.padding_top_small{
	padding-top: calc(var(--padding-top)/2);
}
.padding_bottom{
	padding-bottom: var(--padding-bottom);
}
.padding_bottom_small{
	padding-bottom: calc(var(--padding-bottom) / 2);
}
.padding_vertical{
	padding-top: var(--padding-top);
	padding-bottom: var(--padding-bottom);
}
.padding_vertical_small{
	padding-top: calc(var(--padding-top) / 2);
	padding-bottom: calc(var(--padding-bottom) / 2);
}
.padding_vertical_big{
	padding-top: calc(var(--padding-top) * 2);
	padding-bottom: calc(var(--padding-bottom) * 2.7);
}

/* flex grid */

.flex{
	position: relative;
	display: flex;
	flex-wrap: wrap;
}

.col1_1,
.col1_2,
.col1_3,
.col2_3,
.col1_4,
.col1_5,
.col1_6,
.col1_7,
.col1_8,
.col1_10,
.col1_15,
.col4_5,
.col3_4,
.col_model_overview,
.col_model_sedcard,
.col_model_sedcard_landscape,
.col_model_polaroid,
.col_flex{
	position: relative;
	margin-top: var(--col-margin);
	margin-bottom: var(--col-margin);
	margin-left: var(--row-margin);
	margin-right: var(--row-margin);
	/*background: #f6f6f6;*/
}
.col1_1 img,.col1_2 img,.col1_3 img,.col2_3 img,.col1_4 img,.col1_5 img,.col1_6 img,.col1_7 img,.col1_8 img,.col4_5 img{
	width:100%;
	height: auto;
}

.col1_1{
	flex: 0 0 calc(100% - 2 * var(--row-margin));
	max-width: calc(100% - 2 * var(--row-margin));
}
.col1_2{
	flex: 0 0 calc(50% - 2 * var(--row-margin));
	max-width: calc(50% - 2 * var(--row-margin));
}
.col1_3{
	flex: 0 0 calc(33.33% - 2 * var(--row-margin));
	max-width: calc(33.33% - 2 * var(--row-margin));
}
.col2_3{
	flex: 0 0 calc(66.66% - 2 * var(--row-margin));
	max-width: calc(66.66% - 2 * var(--row-margin));
}
.col1_4{
	flex: 0 0 calc(25% - 2 * var(--row-margin));
	max-width: calc(25% - 2 * var(--row-margin));
}
.col3_4{
	flex: 0 0 calc(75% - 2 * var(--row-margin));
	max-width: calc(75% - 2 * var(--row-margin));
}
.col1_5{
	flex: 0 0 calc(20% - 2 * var(--row-margin));
	max-width: calc(20% - 2 * var(--row-margin));
}
.col4_5{
	flex: 0 0 calc(80% - 2 * var(--row-margin));
	max-width: calc(80% - 2 * var(--row-margin));
}
.col1_6{
	flex: 0 0 calc(16.66% - 2 * var(--row-margin));
	max-width: calc(16.66% - 2 * var(--row-margin));
}
.col1_7{
	flex: 0 0 calc(14.285% - 2 * var(--row-margin));
	max-width: calc(14.285% - 2 * var(--row-margin));
}
.col1_8{
	flex: 0 0 calc(12.5% - 2 * var(--row-margin));
	max-width: calc(12.5% - 2 * var(--row-margin));
}
.col1_10{
	flex: 0 0 calc(10% - 2 * var(--row-margin));
	max-width: calc(10% - 2 * var(--row-margin));
}
.col1_15{
	flex: 0 0 calc(7.5% - 2 * var(--row-margin));
	max-width: calc(7.5% - 2 * var(--row-margin));
}
.col_model_overview{
	flex: 0 0 calc( 100% / var(--model_columns_overview) - 2 * var(--row-margin) );
	max-width: calc( 100% / var(--model_columns_overview) - 2 * var(--row-margin));
}
.col_model_sedcard{
	flex: 0 0 calc( 100% / var(--model_columns_sedcard) - 2 * var(--row-margin) );
	max-width: calc( 100% / var(--model_columns_sedcard) - 2 * var(--row-margin));
}
.col_model_sedcard_landscape{
	flex: 0 0 calc( (100% / var(--model_columns_sedcard) - 2 * var(--row-margin)) * 2 + 2 * var(--row-margin));
	max-width: calc( (100% / var(--model_columns_sedcard) - 2 * var(--row-margin)) * 2 + 2 * var(--row-margin));
}
.col_model_polaroid{
	flex: 0 0 calc( 100% / var(--model_columns_polaroid) - 2 * var(--row-margin) );
	max-width: calc( 100% / var(--model_columns_polaroid) - 2 * var(--row-margin));
}
.testbox{
	width: var(--row-margin);
	height: 50px;
	background: red;
}
/*
.col_polaroid{
	flex: 0 0 calc(25% - 2 * var(--row-margin));
	max-width: calc(25% - 2 * var(--row-margin));
}
*/
.carousel .col_model{
	width: calc(20% - 2 * var(--row-margin));
}

.col1_1_clean,.col1_2_clean,.col1_3_clean,.col1_4_clean{
	/*background: aqua;*/
}
.col1_2_clean img,.col1_3_clean img,.col1_4_clean img{
	width:100%;
}
.col1_1_clean{
	flex: 0 0 100%;
	max-width: 100%;
}
.col1_2_clean{
	flex: 0 0 50%;
	max-width: 50%;
}
.col1_3_clean{
	flex: 0 0 33.33%;
	max-width: 33.33%;
}
.col_flex{
	flex: 1;
}

/* individual templates */

.individual_template{
	flex:1;
}
.col_template{
	flex:1;
	display: flex;
}
.col_template_preview{
	position: relative;
	flex: 1;
	width: 100%;
	height: auto;
	display:flex;
}
.col_template_preview .portrait, .col_template_preview .landscape, .col_template_preview .box, .col_template_preview .panorama, .col_template_preview .template_pic{
	position: relative;
	width: calc(100% - 2 * var(--template-preview-margin));
	margin: var(--template-preview-margin);
	background-color: var(--col-grey);
	background-size: cover !important;
	background-position: center center !important;
	overflow: hidden;
}
.col_template_preview .portrait{
	padding-bottom: calc((100% - 2 * var(--template-preview-margin)) * var(--image_aspect));
}
.col_template_preview .landscape{
	padding-bottom: calc((100% - 2 * var(--template-preview-margin)) * var(--image_aspect)/2);
}
.col_template_preview .panorama{
	padding-bottom: calc((100% - 2 * var(--template-preview-margin)) * var(--image_aspect)/3);
}
.col_template_preview .box{
	padding-bottom: calc(100% - 2 * var(--template-preview-margin));
}
.col_template_preview .template_pic{
	height: calc(100% - 2 * var(--template-preview-margin));
}

.col_template .text_overlay{
	position: absolute;
	padding: 20px 30px;
}
.col_template .text_overlay h1{
	font-weight: 700;
	background: rgba(0,0,0,.5);
	padding: 5px;
	margin: 5px 0;
}
.col_template .text_overlay p{
	font-weight: 300;
	line-height: 140%;
	background: rgba(0,0,0,.5);
	padding: 5px;
}

/* */


@media only screen and (max-width: 1024px) {
	.container{
		width: 94%;
	}
}

@media only screen and (max-width: 768px) {
	/*
	.col_model{
		flex: 0 0 calc(33.33% - 2 * var(--row-margin));
		max-width: calc(33.33% - 2 * var(--row-margin));
	}*/
}
@media only screen and (max-width: 500px) {
	/*.col_model{
		flex: 0 0 calc(50% - 2 * var(--row-margin));
		max-width: calc(50% - 2 * var(--row-margin));
	}*/
	.col_polaroid{
		flex: 0 0 calc(50% - 2 * var(--row-margin));
		max-width: calc(50% - 2 * var(--row-margin));
	}
	.col1_2{
		flex: 0 0 calc(100% - 2 * var(--row-margin));
		max-width: calc(100% - 2 * var(--row-margin));
	}
	.col1_4{
		flex: 0 0 calc(50% - 2 * var(--row-margin));
		max-width: calc(50% - 2 * var(--row-margin));
	}
	.portfolio .col1_3{
		flex: 0 0 calc(50% - 2 * var(--row-margin));
		max-width: calc(50% - 2 * var(--row-margin));
	}
	.portfolio .col2_3{
		flex: 0 0 calc(100% - 2 * var(--row-margin));
		max-width: calc(100% - 2 * var(--row-margin));
	}

}

/* view */

.fullscreen{
	position: relative;
	width: 100%;
	height: 100vh;
}
.fullsize{
	position: relative;
	width: 100%;
	height: 100%;
/*	background-repeat: no-repeat;
	background-position: center center;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;*/
}
.fullwidth		{ width:100%; }

.screen_border{
	width: calc(100% - 40px);
	height: calc(100vh - 40px);
	margin: 20px;
}

.height_view25	{ height:25vh; }
.height_view30	{ height:30vh; }
.height_view35	{ height:35vh; }
.height_view40	{ height:40vh; }
.height_view50	{ height:50vh; }
.height_view60	{ height:60vh; }
.height_view75	{ height:75vh; }
.height_view80	{ height:80vh; }
.height_view100	{ height:100vh;}

.overlay{
	position: fixed;
	top:0;
	left:0;
	width:100%;
	height: 100vh;
	z-index: 20;
	background: white;
	display:none;
	overflow-y: scroll;
}

/* ---------------- align */

/* layout */

.flex_direction_row{
	flex-direction: row;
}
.flex_direction_col,.flex_direction_column{
	flex-direction: column;
}

/* content */

.safe_area_bottom{
	margin-bottom: env(safe-area-inset-bottom);
}

.align_vertical_top{
	display: flex;
	align-items: flex-start;
}
.align_vertical_bottom{
	display: flex;
	align-items: flex-end;
}
.align_vertical_middle{
	display: flex;
	align-items: center;
}

.align_center{
	display: flex;
	justify-content: center;
}
.align_left{
	display: flex;
	justify-content: flex-start;
}
.align_right{
	display: flex;
	justify-content: flex-end;
}
.align_item_top{
	position:absolute;
	top:0;
}
.align_item_bottom{
	position:absolute;
	bottom:0;
}

.text_left{ text-align: left}
.text_right{ text-align: right}
.text_center{ text-align: center}

/* border */

.border-top{
	border-top: 1px solid var(--col-lightgrey);
}
.border-bottom{
	border-bottom: 1px solid var(--col-lightgrey);
}

hr{
	border:0;
	border-top: 1px solid var(--col-lightgrey);
}





.grid-item.grid1_5,
.grid-sizer.grid1_5{
	width: 25%;
}
.grid-item.grid1_3,
.grid-sizer.grid1_3{
	width: 33.33333333%;
}
.grid-item.grid1_4,
.grid-sizer.grid1_4{
	width: 25%;
}
.grid-item.grid1_5,
.grid-sizer.grid1_5{
	width: 20%;
}
.grid-item.grid1_6,
.grid-sizer.grid1_6{
	width: 16.66666664%;
}

.grid-item img{
	color: black;
}

.aspect-ratio-container{
	height: 0;
	position: relative;
	overflow: hidden;
}

.aspect-ratio-container img {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

.grid:after {
	content: '';
	display: block;
	clear: both;
}



/* busy overlay */

.lazyload-loaded .busy_dots{
	display: none;
}

.busy_dots{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: relative;
  animation: busy_dots_ani 0.9s ease alternate infinite;
  animation-delay: 0.36s;
  top: 50%;
  margin: -21px auto 0; }
  .busy_dots::after, .busy_dots::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: busy_dots_ani 0.9s ease alternate infinite; }
  .busy_dots::before {
    left: -20px;
    animation-delay: 0.18s; }
  .busy_dots::after {
    right: -20px;
    animation-delay: 0.54s; }

@keyframes busy_dots_ani {
  0% {
    box-shadow: 0 10px 0 -10px black; }
  100% {
    box-shadow: 0 10px 0 black; } }