
/*===============================================================
	image - text
===============================================================*/
.paragraph-img-txt{
  align-items: inherit;
justify-content: space-between;
flex-wrap: wrap;
display: flex;
gap:var(--gapsmall) var(--gap)
}

.paragraph-img-txt-image{
line-height: 1px;
overflow:hidden;
position:relative;

  display: flex;
  justify-content: inherit;
  align-items: inherit;
}

.paragraph-img-txt-image2{
  background-repeat:no-repeat;
background-position: center center ; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
width:100%;
}


.paragraph-img-txt-image video{
  position: absolute;
  left: 50%;
  top: 50%;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(0%,-50%);
  -moz-transform: translate(0%,-50%);
  -ms-transform: translate(0%,-50%);
  -o-transform: translate(0%,-50%);
  transform: translate(-50%,-50%);
  width: auto;height:100%;
}

/* top */

.paragraph--position--top .paragraph-img-txt-image{  order: 0;width:100%;}
.paragraph--position--top .paragraph-img-txt-body{  order: 1;width:100%;  align-self: start;}

/* bottom */

.paragraph--position--bottom .paragraph-img-txt-body{  order: 0;width:100%;}
.paragraph--position--bottom .paragraph-img-txt-image{  order: 1;width:100%;}

/*left */

 


.paragraph--position--left .paragraph-img-txt-body{  
	order: 1;  align-self: center;
	width:calc(50% - var(--gapsmall)); 
}

.paragraph--position--left .paragraph-img-txt-image{  
	order: 0;
	width:calc(50% - var(--gapsmall)); 
	text-align: left; 
}

.paragraph--position--left_small .paragraph-img-txt-body{  
	order: 1;  align-self: center;
	width:calc(50% - var(--gapsmall)); 
}

.paragraph--position--left_small .paragraph-img-txt-image{  
	order: 0;
	width:calc(50% - var(--gapsmall)); 
	text-align: left; 
}



/*right*/

.paragraph--position--right_small .paragraph-img-txt,
.paragraph--position--right .paragraph-img-txt{gap:var(--gapsmall) var(--gap);}

.paragraph--position--right .paragraph-img-txt-image{  
	order: 1; 
	width:calc(50% - var(--gapsmall)); 
	text-align: right; 
}

.paragraph--position--right .paragraph-img-txt-body{  
	order: 0;  align-self: center;
	width:calc(50% - var(--gapsmall));
}

.paragraph--position--right_small .paragraph-img-txt-image{  
	order: 1; 
	width:calc(50% - var(--gapsmall)); 
	text-align: right; 
}

.paragraph--position--right_small .paragraph-img-txt-body{  
	order: 0;  align-self: center;
	width:calc(50% - var(--gapsmall));
}

@media all and (max-width: 720px) {


/* left */

.paragraph--position--left_small .paragraph-img-txt-image{ order: 1; width:100%;  text-align: center;}
.paragraph--position--left_small .paragraph-img-txt-body{ order: 0;  width:100%;  }

.paragraph--position--left .paragraph-img-txt-image{ order: 1; width:100%;  text-align: center;}
.paragraph--position--left .paragraph-img-txt-body{ order: 0; width:100%;  }


/* right */

.paragraph--position--right_small .paragraph-img-txt-image{ order: 1; width:100%;  text-align: center;}
.paragraph--position--right_small .paragraph-img-txt-body{ order: 0; width:100%;  }


.paragraph--position--right .paragraph-img-txt-image{ order: 1; width:100%;  text-align: center;}
.paragraph--position--right .paragraph-img-txt-body{ order: 0; width:100%;  }


}



/*===============================================================
	content rows
===============================================================*/


.paragraph--position--two > .paragraph-content > .paragraph-content-list{
	align-items: inherit;
	justify-content: start;
	flex-wrap: wrap;
	display: flex;
    gap:var(--gapsmall) var(--gap);
}


.paragraph--position--four > .paragraph-content > .paragraph-content-list,
.paragraph--position--three > .paragraph-content > .paragraph-content-list{
	align-items: inherit;
	justify-content: start;
	flex-wrap: wrap;
	display: flex;
    gap:var(--gap);
}

.paragraph--position--two > .paragraph-content > .paragraph-content-list > div ,
.paragraph--position--three > .paragraph-content > .paragraph-content-list  > div,
.paragraph--position--four > .paragraph-content > .paragraph-content-list  > div{
  display:flex;
}

.paragraph--position--two > .paragraph-content > .paragraph-content-list > div {width:calc(50% - (var(--gap) * 0.5));}
.paragraph--position--three > .paragraph-content > .paragraph-content-list  > div{width:calc(33.33% - (var(--gap) * 2 * 0.3333));}
.paragraph--position--four > .paragraph-content > .paragraph-content-list  > div{width:calc(25% - (var(--gap) * 3 * 0.25));}


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

.paragraph--position--three > .paragraph-content > .paragraph-content-list  > div.paragraph-link  {
  width: calc(50% - (var(--gap) * 1 * 0.5));
}

}

@media all and (max-width: 720px) {

.paragraph--position--four > .paragraph-content > .paragraph-content-list, 
.paragraph--position--three > .paragraph-content > .paragraph-content-list {
  justify-content: center;
}

.paragraph--position--three > .paragraph-content > .paragraph-content-list  > div,
.paragraph--position--four > .paragraph-content > .paragraph-content-list  > div{
width:calc(50% - (var(--gapsmall) * 0.5));
}

.paragraph--position--two > .paragraph-content > .paragraph-content-list > div{
	width:100%;
}

}

@media all and (max-width: 600px) {

.paragraph--position--three > .paragraph-content > .paragraph-content-list  > div,
.paragraph--position--four > .paragraph-content > .paragraph-content-list  > div{
	width:100%; 
}

}


/*========================================================
	paragraphs group
========================================================*/

.paragraph--position--bottom > .paragraph-content > .paragraph-content-list{align-items: end;}
.paragraph--position--top > .paragraph-content > .paragraph-content-list{align-items: start;}
.paragraph--position--center > .paragraph-content > .paragraph-content-list{align-items: center;}
.paragraph--position--inherit > .paragraph-content > .paragraph-content-list{align-items: inherit;}


/*===============================================================
	text - block
===============================================================*/


.paragraph-txt-block  .center{
  display: flex;
  justify-content: start;
  gap:var(--gapsmall) var(--gap);
  align-items: start;flex-wrap:wrap;
}

.paragraph-text{
	width:calc(50% - var(--gapsmall));
}

.paragraph-block{
	width:calc(50% - var(--gapsmall));
}

@media all and (max-width: 720px) {


.paragraph-text,
.paragraph-block{
width:100%;
}

}


/*===============================================================
	image
===============================================================*/


.field--name-field-image  img,
.paragraph--type--image img{
   width:100%;
   
     -webkit-border-radius: var(--radius);
  -moz-border-radius: var(--radius);
  border-radius: var(--radius);
} 


/*==================================================================================================================================
	galerie
==================================================================================================================================*/

.paragraph-content > .field--name-field-galerie,
.node > .field--name-field-galerie{
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-content: inherit;
    gap:var(--gapsmall)
}

.paragraph-content > .field--name-field-galerie .field__item,
.node > .field--name-field-galerie .field__item{
  display: flex;
  justify-content: start;
  align-content: inherit;
  width: calc(50% - (var(--gapsmall) * 0.5 ));
}

.itemscount-var3 .paragraph-content > .field--name-field-galerie  .field__item{
  width: calc(25% - (var(--gapsmall) * 3 * 0.25 ));
}


.paragraph-content > .field--name-field-galerie .field__item a img,
.node > .field--name-field-galerie .field__item a img{
  object-fit: cover;
}

.paragraph-content >  .field--name-field-galerie .field__item a,
.node >  .field--name-field-galerie .field__item a{
  display: flex;
  justify-content: start;
  align-content: inherit;
}

@media all and (max-width: 720px) {

.itemscount-var3 .paragraph-content > .field--name-field-galerie .field__item{
  width: calc(50% - (var(--gapsmall) * 0.5 ));
}

}


@media all and (max-width: 400px) {

.paragraph-content > .field--name-field-galerie .field__item,
.node > .field--name-field-galerie .field__item{
width:100%;
}

.itemscount-var3 .paragraph-content > .field--name-field-galerie .field__item{
  width: calc(50% - (var(--gapsmall) * 0.5 ));
}

}

