/* ----------------------- HERO section ------------------------- */

body{
    padding: 0;
    margin: 0;
}
body *{
    box-sizing: border-box;
}

.rsc-section{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.cont-row{
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
}
.col{
    box-sizing: border-box;
    position: relative;
    width: 50%;
    margin-bottom: 32px;
    /* cursor: pointer; */
    /* height: 706px; */
    /* max-height: 80vh; */
}
.col-1{
    animation: .7s ease-out 0s 1 slideInFromLeft;
    -webkit-animation: .7s ease-out 0s 1 slideInFromLeft;
	cursor: pointer;
}
.col-2{
    transform: translateX(100%);
    animation: .7s ease-out .5s 1 forwards slideInFromRight;
    -webkit-animation: .7s ease-out .5s 1 forwards slideInFromRight;
	cursor: pointer;
}
.section-hide{
    display: none;
}
.wrap-cont{
    width: 100%;
    display: flex;
    position: relative;
    /* max-height: 80vh; */
    /* height: 700px; */
    max-height: 840px;
}
.wrap-col-1{
    text-align: right;
}
.wrap-cont .c-image img{
    /* width: 100%; */
    aspect-ratio: 1;
    height: 100%;
    visibility: hidden;
}
.c-image {
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 0;
    background-repeat: no-repeat;
    background-size: cover;
}
.col-1 .c-image{
    background-image: url(/wp-content/uploads/img/marina-SX.png);
    background-position: right bottom;
}
.col-1 .c-image-act {
    background-image: url(/wp-content/uploads/img/sagoma-sx-long.svg);
    background-position: right bottom;
}
.col-2 .c-image{
    background-image: url(/wp-content/uploads/img/industry-DX.png);
    background-position: left bottom;
}
.col-2 .c-image-act {
    background-image: url(/wp-content/uploads/img/sagoma-dx-long.svg);
    background-position: left bottom;
}
/* --------------------- contenuto wrap */
/* .col-1 .inn-c{
    padding-bottom: 5%;
}
.col-2 .inn-c{
    padding-bottom: 5%;
} */

.inn-c {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 100%;
    width: 70%;
    margin: 0 auto;
    max-width: 500px;
    width: 70%;
    align-content: center;
    padding-bottom: 5%;
}
.inn-c > div {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-basis: 50%;
    padding: 16px;
}
.inn-c > div a {
    background-color: #76cec1;
    font-size: 0;
    border-radius: 16px;
    overflow: hidden;
    display: block;
    position: relative;
}
.inn-c > div a .tit-cat {
    font-family: 'Be Vietnam Pro', sans-serif;
    position: absolute;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    color: #FFF;
    text-align: center;
    z-index: 1;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    
}

.inn-c > div a img{
    opacity: .4;
    transition: opacity .5s ease;
    width: 100%;
 }
 .inn-c > div a:hover{
    outline: 4px solid #76cec1;
 }
 .inn-c > div a:hover img{
    opacity: 1;
 }


.wrap-cont .titolo {
    font-family: 'Be Vietnam Pro', sans-serif;
    position: absolute;
    color: #FFF;
    top: 55%;
    font-size: 35px;
    font-weight: 800;
    line-height: 1em;
    cursor: pointer;
}
.wrap-col-1 .titolo{
    right: 20%;
    text-align: right;
}
.wrap-col-2 .titolo{
    left: 20%;
    text-align: left;
    top: 57%;
}
.back-sx {
    font-size: 14px;
    font-weight: normal;
    text-align: left;
    display: none;
    cursor: pointer;
}
.back-dx {
    font-size: 14px;
    font-weight: normal;
    text-align: right;
    display: none;
    cursor: pointer;
}
/* //////////// over //////////// */
.col-over{
    z-index: 10;
}
.titolo{
    transition: opacity 1.2s ease;
}

.c-image{
    transition: opacity 1s ease;
}
.op-sagoma .titolo{
    opacity: 0;
}
.op-sagoma .c-image{
    opacity: .25;
}

.wrap-col-1-append{
    display: none;
    position: absolute;
    left: 100%;
    bottom: 0;
}
.wrap-col-2-append{
    display: none;
    position: absolute;
    right: 100%;
    bottom: 0;
}
.appendi{
    animation-name: append-o;
    animation-duration: 1s;
}

/* ////////////////// animation ////////////////// */

@keyframes append-o {
    from {opacity: 0}
    to {opacity: 1}
  }
@keyframes slideInFromLeft {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
  }
@keyframes slideInFromRight {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(0);
    }
  }


/* ////////////////////  firefox mozilla */
@-moz-document url-prefix() {
    h1 {
      color: red;
    }
    .elementor-1546 .elementor-element.elementor-element-73df1eb > .elementor-container {
        height: 700px;
    }
    .elementor-1546 .elementor-element.elementor-element-73df1eb > .elementor-container .elementor-element-13af7a5 {
        height: 700px;
    }
    .elementor-1546 .elementor-element.elementor-element-75b8764.elementor-widget-html {
        height: 100%;
    }
    .elementor-1546 .elementor-element.elementor-element-75b8764.elementor-widget-html > .elementor-widget-container {
        height: 100%;
    }
    .rsc-section, .rsc-section .cont-row, .rsc-section .cont-row .col {
        height: 100%;
    }
    .wrap-col-1,.wrap-col-2 {
        height: 100%;
    }
  }


/* ///////////////////////////////////////// RESPONSIVE ///////////////////////////////////////// */

/* @media all and (max-width: 1366px) { } */
/* @media all and (max-width: 1280px) { ...}*/
@media all and (max-width: 980px) { 
    .inn-c {
        /* padding-bottom: 10%; */
    }
}
@media all and (max-width: 736px) { }
@media all and (max-width: 480px) { } 

/* /////////////// END //////////////// */