.ui-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.ui-block {
    background-color: rgb(255,255,254);
    width: 100%;
    position: relative;
    overflow: hidden;
}
.ui-box {
    position: absolute;
    overflow: hidden;
}
.ui-Text {
    position: absolute;
    text-align: right;
    font-family: iransans, sans-serif;
    font-weight: normal;
    direction: rtl;
    margin: 0px;
}
    .ui-Text a {
        color: initial;
        text-decoration: none;
    }

.ui-RichText {
    position: absolute;
    z-index: 1;
}

.ui-Link {
    position: absolute;
    text-align: right;
    font-family: iransans, sans-serif;
    font-weight: normal;
    direction: rtl;
}

.ui-Picture {
    position: absolute;
    background-size: contain;
    background-position: center;
}
    .ui-Picture a {
        display: block;
        width: 100%;
        height: 100%;
    }

.ui-Icon {
    position: absolute;
    line-height: 0;
    padding: 1%;
}
    .ui-Icon a {
        color: inherit;
        display:contents;
    }

.ui-shape {
    position: absolute;
    direction: ltr;
}


    .ui-shape svg {
        fill: #4399fa;
    }

.ui-boxtemplate {

    position: relative;
    overflow: hidden;
    display:flex;
    flex-wrap:wrap;
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 600px) {
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 768px) {
    .ui-block {
        width: 100% !important;
    }

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (max-width: 992px) {
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
}