.elementor-147 .elementor-element.elementor-element-541ddea a{color:var( --e-global-color-c2b48d3 );}.elementor-147 .elementor-element.elementor-element-541ddea a:hover{color:#000000;}/* Start custom CSS for html, class: .elementor-element-2f94b2e */*,*::before, *::after {
    box-sizing: border-box;
}

body {
    background: #e5e5e5;
    margin: 0;
}

.row {
    display: flex;
}

.container {
    max-width: 100%;
    margin: 0 auto;
}

.button-landing {
    
    border-style: solid;
    border-color: #fff;
    border-width: 1.5px;
    border-radius: 10px;
    color: #fff;
    margin: 5px;
    padding: 10px 40px 10px 40px;
    
}

.button-landing:hover {
    background-color: #fff;
    color: #000;
}


/* Cards */
h1 {
    font-size: 5em;
    color: #000000;
    text-transform: uppercase;
    margin: 0.4em;
    text-align: center;
}

.cards {
    flex-wrap: wrap;
    column-gap: 2em;
    padding: 2em 0;
    justify-content: center;
    
}

.card {
    align-items: stretch;
    justify-content: center;
    position: relative;
    max-width: 30vw;
    min-height: 70vh;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
    background-image: url('https://oscam.devmaster.ch/wp-content/uploads/2022/10/AdobeStock_241684941.jpeg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    transition: max-width 1.5s ease-in-out;
    -webkit-transition:  max-width 1.5s ease-in-out;
    -moz-transition:  max-width 1.5s ease-in-out;
    -ms-transition:  max-width 1.5s ease-in-out;
    -o-transition:  max-width 1.5s ease-in-out;
      box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1), 0 0 0 2px rgb(255, 255, 255),
    0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
}

.card:nth-of-type(2) {
    background-image: url('https://oscam.devmaster.ch/wp-content/uploads/2022/10/AdobeStock_184954079.jpeg')
    
}

.card:hover {
    max-width: 60vw;
}

.card-body {
    background: linear-gradient(180deg, rgba(45, 45, 45, 0) 0%, #2d2d2d);
}


h2 {
    font-size: 38px;
    color: #fffbfb;
    text-transform: uppercase;
    margin: 0 auto;
    transform: rotate(-90deg) translateX(-250px);
    -webkit-transform: rotate(-90deg) translateX(-250px);
    -moz-transform: rotate(-90deg) translateX(-250px);
    -ms-transform: rotate(-90deg) translateX(-250px);
    -o-transform: rotate(-90deg) translateX(-250px);
}

p {
    position: relative;
    font-size: 18px;
    color: #fff;
    margin-top: 5em;
    margin-left: 5em;
    margin-right: 5em;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease-in-out;
    -webkit-transition:  max-height 0.3s ease-in-out;
    -moz-transition:  max-height 0.3s ease-in-out;
    -ms-transition:  max-height 0.3s ease-in-out;
    -o-transition:  max-height 0.3s ease-in-out;
}

/*.litle-text {*/
/*    margin: 5em;*/
/*}*/


.button-section {
    position: relative;
    opacity: 0;
    transition: max-height 0.5s ease-in-out;
    -webkit-transition:  max-height 0.5s ease-in-out;
    -moz-transition:  max-height 0.5s ease-in-out;
    -ms-transition:  max-height 0.5s ease-in-out;
    -o-transition:  max-height 0.5s ease-in-out;
}

.card:hover h2 {
    opacity: 0;
    margin-top: 2em;
    transform: unset;
    -webkit-transform: unset;
    -moz-transform: unset;
    -ms-transform: unset;
    -o-transform: unset;
    /*transform: rotate(-90deg) translateX(-250px);*/
    /*-webkit-transform: rotate(-90deg) translateX(-250px);*/
    /*-moz-transform: rotate(-90deg) translateX(-250px);*/
    /*-ms-transform: rotate(-90deg) translateX(-250px);*/
    /*-o-transform: rotate(-90deg) translateX(-250px);*/
    transition: margin-right 1.5s ease-in-out;
    -webkit-transition:  margin-right 1.5s ease-in-out;
    -moz-transition:  margin-right 1.5s ease-in-out;
    -ms-transition:  margin-right 1.5s ease-in-out;
    -o-transition:  margin-right 1.5s ease-in-out;
    /*animation: moveLeft 1s ease-in-out;*/
    /*animation-delay: 0.5s;*/
    /*animation-fill-mode: both;*/
    animation: fadeIn 1s forwards;
}

.card:hover p{
    position: relative;
    opacity: 0;
    max-height: 100%;
    animation: fadeIn 2s forwards;
    animation-delay: 1s;
}

.card:hover .button-section{
    position: relative;
    opacity: 0;
    animation: fadeIn 1s forwards;
    animation-delay: 1s; 
    padding-top: 5em;
}


@keyframes fadeIn {

  0% { opacity: 0; }
  100% { opacity: 1; }
  
}

/* End Cards */

@media screen and (max-width: 960px){

    .row{
        display: felx;
    }
    
    .container{
        max-width: 100%;
        height: 100vh;
        margin: 0 auto;
    }
    
    .button-landing{
        margin: 5px;
        border-color: #fff;
        color: #fff;
    }
    
    .cards{
        flex-wrap: wrap;
        column-gap: 2em;
        padding: 2em 0;
    }
    
    .card {
        margin: 2em 0.5em;
        align-items: stretch;
        justify-content: center;
        position: relative;
        max-width: 100%;
        min-height: 50%;
        text-align: center;
        overflow: hidden;
        background-image: url('https://oscam.devmaster.ch/wp-content/uploads/2022/10/AdobeStock_241684941.jpeg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 25px;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        -ms-border-radius: 25px;
        -o-border-radius: 25px;
        transition: none;
        box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1), 0 0 0 2px rgb(255, 255, 255),
        0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
    }
    
    .card:nth-of-type(2) {
    background-image: url('https://oscam.devmaster.ch/wp-content/uploads/2022/10/AdobeStock_184954079.jpeg')
    }
    
    .card-body {
        padding: 2em;
    }
    
    .card:hover {
        margin: 2em 0.5em;
        align-items: stretch;
        justify-content: center;
        position: relative;
        max-width: 100%;
        min-height: 50%;
        text-align: center;
        overflow: hidden;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 25px;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        -ms-border-radius: 25px;
        -o-border-radius: 25px;
        transition: none;
        box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1), 0 0 0 2px rgb(255, 255, 255),
        0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
    }
    
    h1 {
        display: none;
        /*font-size: 3em;*/
        /*color: #000000;*/
        /*text-transform: uppercase;*/
        /*margin: 0.5em 0em 0.3em 0em;*/
        
        /*text-align: center;*/
    }
    
    h2 {
        font-size: 1.5em;
        color: #fffbfb;
        text-transform: uppercase;
        margin: 1em 4em;
        transform: none;
        animation: none;
    }
    
    p {
        position: relative;
        font-size: 1em;
        color: #fff;
        margin: 1em 0em 1em 0em;
        max-height: 10em;
        display: none;
        transition: none;
    }
    
    .card:hover h2 {
        opacity: 1;
        padding-top: 0em;
        font-size: 1.5em;
        color: #fffbfb;
        text-transform: uppercase;
        margin: 1em 4em;
        transform: none;
        animation: none;
    }
    
    .card:hover p {
        display: none;
        margin: 5em;
        /*position: relative;*/
        /*font-size: 1em;*/
        /*color: #fff;*/
        /*margin: 1em 0em 1em 0em;*/
        /*max-height: 10em;*/
        /*display: flex;*/
        /*opacity: 1;*/
        /*transition: none;*/
    }
    
    .button-section {
        position: relative;
        opacity: 1;
        transition: none;
        margin: 2em;
        /*display: none;*/
    }
    
    .card:hover .button-section {
        position: relative;
        justify-content: center;
        opacity: 1;
        transition: none;
        /*display: flex;*/
        padding-top: 0em;
        animation: none;
    }
    
}/* End custom CSS */