.landingFlipcards
{
    position: relative;
    width:100%;
    height:auto;
    float:left;
    margin-top:100px;
    justify-content: space-between;
}

.landingFlipcardCarrier
{
    position: relative;
    width:auto;
    height:100%;
    float:left;
    pointer-events: all;
}


.landingFlipcard {
    background-color: transparent;
    width: 450px;
    height: 450px;
    perspective: 1000px;
}

.landingFlipcardInner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 1s;
    transform-style: preserve-3d;
}

.landingFlipcardFront, .landingFlipcardBack {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    background-color: white;
    box-sizing: border-box;
    border-radius: 25px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.landingFlipcardBack
{
    color: white;
    transform: rotateY(180deg);
}

.landingFlipcardFrontImage
{
    position: relative;
    width:100%;
    height:300px;
}

.landingFlipcardImage
{
    position: relative;
    max-height:350px;
    max-width: 350px;
    overflow: hidden;
}

.landingFlipcardHeadline
{
    position: relative;
    width:100%;
    height:50px;
    font-size: 1.6em;
    font-weight:700;
    color: var(--text-darkgray);
}

.landingFlipcardHeadlineBack
{
    margin-top:30px;
}

.landingFlipcardText
{
    position: relative;
    width:100%;
    height:250px;
    float:left;
    box-sizing:border-box;
    padding:20px;
    color: var(--text-darkgray);
    font-size:1.4em;
    text-align:center;
    margin-bottom: 20px;
}

.landingFlipcardButtonCarrier
{
    position: relative;
    width: 100%;
    height: auto;
    float: left;
    margin-top: 20px;
    margin-bottom: 20px;
}

.landingFlipcardButton
{
    position: relative;
    width: 250px;
    height: 40px;
    border-radius: 20px;
    border: solid 2px var(--pink);
    box-sizing: border-box;
    background-color: var(--pink);
    color: var(--white-text);
    font-weight: 700;
    font-size: 1.2em;
    pointer-events: none;
}

.landingFlipcardButtonBack
{
    pointer-events: all;
}

.landingFlipcardButtonBack:hover
{
    color: var(--pink);
    background-color: var(--white-background);
}

@media (min-width: 1180px)
{
    .landingFlipcard:hover .landingFlipcardInner
    {
        transform: rotateY(180deg) rotateZ(360deg);
    }
}

@media (max-width: 1300px)
{
    .landingFlipcards
    {
        justify-content: center !important;
    }

    .landingFlipcardCarrier
    {
        margin:20px;
    }
}

@media (max-width: 1180px)
{

    .landingFlipcards
    {
        flex-wrap: wrap;
    }

    .landingFlipcard
    {
        width:85%;
        min-width:300px;
        max-width:450px;
        height:470px;
    }

    .landingFlipcardText
    {
        height:300px;
    }

    .landingFlipcardInner
    {
        height:100%;
    }

    .landingFlipcardCarrier
    {
        width:100%;
        height:auto;
        margin-top:25px;
        margin-bottom:25px;
    }

    .landingFlipcardFront
    {
        position: relative;
        float:left;
        height:100%;
        box-sizing: border-box;
        padding: 20px;
        overflow: hidden;
    }

    .landingFlipcardHeadline
    {
        font-size:1.5em;
        margin-bottom: 10px;
    }

    .landingFlipcardBack
    {
        height:100%;
    }

    .landingFlipcardText
    {
        height: 270px;
        margin-bottom: 0;
        font-size: 1.15em;
    }



}



.imageblocks
{
    position: relative;
    width: 100%;
    flex-wrap:wrap;
    float: left;
    margin-bottom: 70px;
}

.imageblock
{
    position: relative;
	width:260px;
	height:260px;
	overflow:hidden;
	cursor:pointer;
    margin: 17px;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    border-radius: 20px;
}

.imageblock:hover .imageblockbackground
{
	transform: scale(1.1);

}

.imageblock:hover .imageblockforeground
{
	background: transparent;
}

.imageblockbackground, .imageblockforeground
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:hidden;
	pointer-events: none;
	transition: all .4s ease-in-out;
}

.imageblockimage
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);	
    filter: grayscale(1)
}

.imageblockforeground
{
	background: var(--image-overlay-lighter);
}

.imageblock:hover .imagebackground
{
	width: 1px
}

.imageblock:hover .imageblockimage
{
    filter: none
}

.imageblocktitle
{
    position: relative;
    width: 100%;
	margin-top:150px;
	height:50px;
	font-family:'Barlow';
	font-size:1.7em;
	color:white;
    float:left;
}

.imageblocksubtitle
{
    position: relative;
    width: 100%;
	height:50px;
	align-items:flex-start;
	font-family:'Barlow';
	font-size:1.2em;
	color:white;
    float:left;
    text-align: center;
}