.UIGridStackExt {
    background-color: #f8fff9;
    padding: 20px;
    margin-top: 20px;
    margin: 20px 10px;
}

.UIGridStackExt .GroupHeader p {
    color: #e60404;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 18px !important;
}

.UIGridStackExt .Item {
    border-bottom: solid 1px lightgray;
    padding: 20px 0px;
    position: relative;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: start;
}

.UIGridStackExt .circle {
    border-radius: 50%;
    border: solid 0.5px #6c6d74;
    object-fit: cover;
    max-width: 100%;
    height: 260px;
    width: 260px;
    box-sizing: border-box;
}

.UIGridStackExt .square {
    width: 260px;
    height: auto;
    object-fit: cover;
}

.UIGridStackExt .readmore {
    color: #ffffff;
    background-color: #de2525;
    vertical-align: middle;
    font-size: 12px;
    line-height: 38px;
    padding: 0 20px;
    width: 90px;
    margin-top: 20px;
    display: none;
}

.UIGridStackExt .readmore:hover {
    color: #ffffff;
    background-color: #2b98db;
    border: solid 1px #f7f7f7;
}

.UIGridStackExt .title-article {
    font-size: 15px;
    text-transform: uppercase;
    line-height: 1.5;
    font-weight: bold;
}

.UIGridStackExt blockquote {
    text-align: center;
    font-size: 15px;
    line-height: 1.5;
    margin: 10px 0 0 0;
    padding: 0;
}

.UIGridStackExt .left-form {
    width: 60%;
    display: flex;
    justify-content: start;
    flex-direction: column;
}

.UIGridStackExt .right-image {
    width: 40%;
    padding-left: 5%;
    display: flex;
    justify-content: end;
}

.UIGridStackExt .left-image {
    width: 40%;
    padding: 0;
    display: flex;
    justify-content: start;
}

.UIGridStackExt .fb-icon {
    background-color: rgba(48,48,51,.8);
    opacity: 0.5;
    z-index: 2;
    display: none;
}

.UIGridStackExt .left-image:hover .fb-icon {
    background-color: rgba(48,48,51,.8);
    display: flex;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    position: absolute;
    top: 0px;
    justify-content: center;
    align-items: center;
    opacity: 0.9;
    cursor: pointer;
}

.UIGridStackExt .right-form {
    width: 60%;
    padding-right: 0;
    display: flex;
    justify-content: end;
    flex-direction: column;
}

/* Scroll*/
/* effect when scroll*/
.UIGridStackExt [data-animate-in] {
    opacity: 0;
    transition: transform 1s ease, opacity 1s ease
}

.UIGridStackExt [data-animate-in="up"] {
    transform: translate3d(0, 24px, 0)
}

.UIGridStackExt [data-animate-in="left"] {
    transform: translate3d(-25%, 0, 0)
}

.UIGridStackExt [data-animate-in="right"] {
    transform: translate3d(25%, 0, 0)
}

[data-animate-in="down"] {
    transform: translate3d(0, -24px, 0)
}

.UIGridStackExt [data-animate-in="fadeIn"] {
    transform: translate3d(0, 0, 0)
}

.UIGridStackExt [data-animate-in].in-view {
    text-align: center;
    margin: auto;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transition: transform 0.6s ease, opacity 0.6s ease
}

.UIGridStackExt .fade-in {
    opacity: 0;
    transition: opacity 1s ease
}

.UIGridStackExt .page-loaded .fade-in, .UIGridStackExt .page-loaded.fade-in {
    opacity: 1
}

.UIGridStackExt .isSafari.isTouch [data-animate-in], .UIGridStackExt .isSafari.isTouch [data-animate-in="up"] {
    opacity: 1;
    transition: none;
    transform: none
}

.UIGridStackExt .stat-wrap p {
    cursor: pointer;
    transition: all 0.2s ease;
}

.UIGridStackExt .stat-wrap p:hover {
    transition: all 0.2s ease;
}

/*******************************/
.UIGridStackExt .paging a, .UIGridStackExt .paging input, .UIGridStackExt .btn_pagging, .UIGridStackExt .paging span span {
    background: #f1f1f1 !important;
    color: #222;
    padding: 10px 20px !important;
    font-weight: 800;
    margin: 0 5px;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    border: none;
}

.UIGridStackExt .paging span span {
    background: #e00 !important;
    color: #fff;
}

.UIGridStackExt .paging a:hover {
    background: #ddd !important;
}

.UIGridStackExt .paging [disabled="disabled"], .UIGridStackExt .paging input[value=Last] , .UIGridStackExt .paging input[value=First] {
    display: none;
}

.UIGridStackExt .paging {
    text-align: center;
    margin-top: 30px;
}

.UIGridStackExt .paging input[value=Previous] {
    font-size: 0;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACbUlEQVRYR7WXTYriQBTH6yWViAbpuBF0IxFRUbAVL5AbdM8J9AgzJ+kj2HMDj9AX8GNwIbhQRhBEF2Z2BmPeUGIGR1JJyhi3Jvn/3kf93ysgT/51Op0SAEwJIZ/j8fhH2Och7AGR/7vd7sv5fP4ihLSv7w1lWe6PRqM/vO88DYCJO45zK+5pTiVJep9MJr/9IJ4G0Gq1JojoRX6vNZzNZt8SA2g2mwMA6HPSPE2lUiavDLEz0Gg0BoQQrng6neaKM+BYALVa7QMAvvtFjojT0+lkLpdLbgPGAqjX6z1E/OSlPYr4wwDVajVI3KKUtufzuW/X3wMLl6BSqbwRQoacyC1JkszFYvErqn8IARiG8QoA7KzrPgIWIpqr1SqyuFAJmDgicsUBQFg8MoBhGCXXdZm/+0bO0i4auZfB0BKUy+WLxfJcjhnQer3+GbXmQk3IxG3b/gIAX4tFxP5ms3lYPLQExWJxcjPZ/oNnkccVDwUoFApcABb9druNFX0oQC6Xe1FV1W/EXrLBshAXIrQJGQSllAvBBtF+v384E6EALFJd10uU0sBjuNvthAwo8jH0Hszn86/XjcfXC1zXNS3LEoaIlAEPQtd1rhUjokUIEYYQAriW4w0RucOIWbJIJoQBGEQ2m+2xtZs3EWVZbluWlcw49kQ1TesBAHchURTFPBwOgdtQqA+E+bumaR+I6LuSEUIuy2gYxEMluAXLZDID5op+sGyC2rZtEkKSvZioqhq4lgdBxM6AF7miKEFzY+g4TnIXkysEz7KnlNL34/GY7NXMg5Ak6d/cYH5x7Y9ke+CuAS/Xc3ZEXdcNvZ7/BWUsATBPMgzxAAAAAElFTkSuQmCC) !important;
    background-repeat: no-repeat !important;
    background-size: 15px !important;
    background-position: center center !important;
}

.UIGridStackExt .paging input[value=Next] {
    font-size: 0;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAABaElEQVR4Xu3ZMUqDQRiE4TemFDyPIKSNeAu9SfAYeoJA2oClNvE8gr1sEdgiQgjZ+QZ2UifszrPz/WH5F0z+WUyenwCkAZMLZAQmL0AeghmBjMDkAhmByQuQf4GMQEZAI3AH7IBX4Euz5HmrKEaghf8A7oFf4MkJYTRAH/54JFYIIwGWwCfwcKKMP8AjcDivqOO+NRKg7foZeAduTkSwaMJoAHsEBYA1ggrAFkEJYImgBrBDqACwQqgCsEGoBLBAqAYoR3AAKEVwAShDcAJ4Ad7+uTe0y9Ma+L72tcgFoCR8w3QAKAvvAFAavhqgPHwlgEX4KgCb8BUAVuHVAHbhlQCW4VUAtuEVANbhRwPkxQhwC+yBVXeJGXaxueSipLgL9AhW4UePQH8g7SXpFtg4vA/sN6ZowCXNlP0mADJq04XSANODkW0rDZBRmy6UBpgejGxbaYCM2nShNMD0YGTbSgNk1KYLTd+AP/KGXkGZoDn5AAAAAElFTkSuQmCC) !important;
    background-repeat: no-repeat !important;
    background-size: 30px !important;
    background-position: center center !important;
}

.square .Item .right-image {
    float: left;
    padding-left: 0 !important;
    display: block !important;
}

.square .Item:nth-child(2n+1) {
}

.square .Item .left-form {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0,-50%);
}

.square .right-image img {
    width: 100%;
    float: left;
    padding-left: 0 !important;
    display: block !important;
}
.UIGridStackExt.square .Item {
    display: block;
    overflow: hidden;
}

.UIGridStackExt.square .Item:nth-child(2n+1) .right-image {
    float: left;
}

.UIGridStackExt.square .Item:nth-child(2n+1) .left-form.in-view {
    /* left: 0; */
    /* right: auto; */
}