@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

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


.mg_22{
    margin-top: -22px;
}

.pd_30{
    padding-left: 30px;
}

.pd_35{
    padding-left: 35px;
}

.pd_40{
    padding-left: 40px;
}

.pd_50{
    padding-left: 50px;
}

.pdT_45{
    padding-top: 45px;
}

body {
    overflow: hidden; 
}

h3{
    font-size: large;
    margin: 0;
    font-family: 'Poppins';
}

h3:first-child{
    margin-top: 10px;
}

h4{
    font-size: 30px;
    font-weight: bold;
    color: #336DB4;
    /* color: #e2001a; */
    font-family: 'Poppins';
    margin-top: -2px;
    text-align: center;
    /* margin-bottom: 3px;  */
}

body{
    background-color: #e9eef9;
}


/* fine regole generali */
.row_height{
    height: 185px;
}

.mobile{
    display: none;
}

.plus i{
    font-size: xx-large;
    color: #336DB4;
}

.desktop img{
    margin-top: -45px;
}


/* bottoni */
.animationType{
    width: 300px;
    height: 95px;
    /* margin-top: 5px; */
    transition: all 0.5s ease-in; 
    text-align: center;
}
.animationType:hover{
    cursor: pointer;
}


/* START BUTTON TOP */
/* top */
#animatingTextTop{
    text-align: center;
}


/* left  */
/* .row-left{
    width: 0%;
} */



/* right */
/* .row-right{
    float: right;
} */
/* END BUTTON TOP */


/* MEDIA QUERY */
/* mobile */
@media screen and (max-width: 767px){
    .users img{
        width: 100px;
    }
    /* rimuovo altezza righe */
    .row_height{
        height: 0;
    }
    /* rimuovo padding */
    .pd_50{
        padding-left: 0;
    }
    /* margine per distanziare le righe */
    .col-xs-12{
        margin-top: 15px;
    }
    /* mostro e nascondo user mobile e desktop */
    .mobile{
        display: block;
    }
    .desktop{
        display: none;
    }
    /* bottone + */
    .plus{
        margin-bottom: 20px;
    }
    .plus {
        margin-top: -10px;
    }
    .animationType{
        margin-top: 35px;
    }
    .animationTypeFirst{
        margin-top: 0;
    }
    .pdT_45{
        padding-top: 0;
    }
    .mt_30{
        margin-top: 30px;
    }
}



/******************* TUTTE LE ANIMAZIONI *************/
/*Animation 1.03 - Dissolve In from Top*/
.visibleNow .dissolveInTop{
    -webkit-animation: dissolveInTop 0.7s ease-in-out;
}
@-webkit-keyframes dissolveInTop{
	0%{opacity: 0; transform:translate3d(0,-100px,0)}
	100%{opacity: 1; transform:translate3d(0,0,0)}
}


/*Animation 1.06 - Dissolve In from Top-Left*/
.visibleNow .dissolveInTop-Left{-webkit-animation: dissolveInTop-Left 0.7s ease-in-out;}
@-webkit-keyframes dissolveInTop-Left{
	0%{opacity: 0; transform:translate3d(-200px,-100px,0)}
	100%{opacity: 1; transform:translate3d(0,0,0)}
}



/*Animation 1.05 - Dissolve In from Top-Right*/
.visibleNow .dissolveInTop-Right{-webkit-animation: dissolveInTop-Right 0.7s ease-in-out;}
@-webkit-keyframes dissolveInTop-Right{
	0%{opacity: 0; transform:translate3d(200px,-100px,0)}
	100%{opacity: 1; transform:translate3d(0,0,0)}
}


/*Animation 1.07 - Dissolve In from Bottom-Left*/
.visibleNow .dissolveInBottom-Left{-webkit-animation: dissolveInBottom-Left 0.7s ease-in-out;}
@-webkit-keyframes dissolveInBottom-Left{
	0%{opacity: 0; transform:translate3d(-200px,100px,0)}
	100%{opacity: 1; transform:translate3d(0,0,0)}
}


/*Animation 1.08 - Dissolve In from Bottom-Right*/
.visibleNow .dissolveInBottom-Right{-webkit-animation: dissolveInBottom-Right 0.7s ease-in-out;}
@-webkit-keyframes dissolveInBottom-Right{
	0%{opacity: 0; transform:translate3d(200px,100px,0)}
	100%{opacity: 1; transform:translate3d(0,0,0)}
}