.animated { 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
} 
.slower {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}
.slow {
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes marginBottom {
    0% {
        opacity: 0;
        transform: translateY(-20px)
    }
    60%,
    80% {
        transform: translateY(0)
    }
    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes marginBottom {
    0% {
        opacity: 0;
        transform: translateY(-20px)
    }
    60%,
    80% {
        transform: translateY(0)
    }
    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

.divSlidebottom {
    opacity: 0
}

.marginBottom {
    -webkit-animation-name: marginBottom;
    animation-name: marginBottom
}

@-webkit-keyframes growIn { 
    0% { 
        -webkit-transform: scale(0.2); 
        opacity:0;
    } 
    50% { 
        -webkit-transform: scale(1.2); 

    } 
    100% { 
        -webkit-transform: scale(1); 
        opacity:1;
    } 
} 
@keyframes growIn { 
    0% { 
        transform: scale(0.2); 
        opacity:0;
    } 
    50% { 
        transform: scale(1.2); 

    } 
    100% { 
        transform: scale(1); 
        opacity:1;
    } 
} 
.growIn { 

    -webkit-transform: scale(0.2);
    transform: scale(0.2);
    opacity:0;
}
.growIn.go{
    -webkit-animation-name: growIn; 
    animation-name: growIn; 
}

.overlay-cornershape.open .header-sm-1,
.overlay-cornershape.open .header-sm-2,
.overlay-cornershape.open .header-sm-3,
.overlay-cornershape.open .header-sm-4 {
    animation-name: stretch;
    animation-duration: .5s;
    animation-timing-function: ease-out
}

@media all and (min-width:0\0) and (min-resolution:.001dpcm) {
    .divSlidebottom {
        opacity: 1
    }
}

.btn-menu.open span:nth-child(2),
.menu.on .btn-menu span:nth-child(2) {
    opacity: 0
}

.colm-ht {
    height: 60px
}
#media,
.col-ft ul {
    list-style-type: none
}

.menu,
body.scroll_fix {
    overflow: hidden
}

.btn-menu,
.menu {
    z-index: 3;
    position: fixed;
}

.btn-submit,
.go-bt,
.mr-2>.btn {
    cursor: pointer
}

#menu-list a:hover,
.col-ft a:focus,
.col-ft a:hover,
.header-sm:hover a,
.services-thumb:focus,
.services-thumb:hover {
    text-decoration: none
}

#media a,
#media li,
.banner-content,
.folio-cn,
.header-sm a {
    vertical-align: middle
}
.menu {
    width: 43px;
    height: 43px;
    top: 5%;
    right: 5%;
    background: #ea2e2c;
    border-radius: 1000px;
    -webkit-transition: all .2s;
    transition: all .2s
}

.menu.on {
    width: 100%;
    height: 100%;
    top: 0;
    right: inherit;
    right: 0;
    border-radius: inherit
}

.btn-menu,
.menu .btn-menu {
    background: rgba(234, 46, 44, .94);
    border: none;
    outline: 0!important;
    cursor: pointer;
    padding: 13px 11px
}

#menu-list,
#menu-list ul {
    padding: 0;
    list-style-type: none
}

.btn-menu {
    border-radius: 50%;
    top: 5%;
    right: 5%
}

.btn-menu span {
    width: 20px;
    height: 2px;
    background: #fff;
    display: block;
    margin: 0 auto 5px;
    transition: .4s
}

.btn-menu span:last-child {
    margin-bottom: 0
}

.btn-menu.open {
    background: 0 0
}

.menu.on .btn-menu {
    position: absolute;
    top: 5%;
    right: 5%
}

.menu.on .btn-menu span:first-child {
    -webkit-transform: rotate(-45deg) translate(-6px, 6px);
    transform: rotate(-45deg) translate(-6px, 6px)
}

.menu.on .btn-menu span:last-child {
    -webkit-transform: rotate(45deg) translate(-4px, -4px);
    transform: rotate(45deg) translate(-4px, -4px)
}

.btn-menu.open span {
    -webkit-transform: rotate(-45deg) translate(-6px, 6px);
    transform: rotate(-45deg) translate(-6px, 6px)
}

.btn-menu.open span:last-child {
    -webkit-transform: rotate(45deg) translate(-4px, -4px);
    transform: rotate(45deg) translate(-4px, -4px)
}

.menu-wraper {
    display: none
}

.menu.on .menu-wraper {
    display: block
}

.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2
}

.header-sm {
    position: absolute;
    left: 0;
    width: 150px;
    height: 150px;
    font-size: 6rem;
    color: #e1302e;
    background: #fff;
    border: 2px solid #fff;
    border-radius: 100%;
    text-align: center;
    display: table
}

.header-sm a {
    display: table-cell;
    color: #e1302e
}

.header-sm:hover {
    background: #e1302e;
    border: 2px solid #fff
}

.header-sm:hover a {
    color: #fff
}

.header-sm-1 {
    left: 35%;
    bottom: 10%;
    width: 60px;
    height: 60px;
    font-size: 2.4rem
}

.header-sm-2 {
    left: 50%;
    top: 45%;
    width: 100px;
    height: 100px;
    font-size: 4rem
}

.header-sm-3 {
    left: 15%;
    bottom: 35%;
    width: 80px;
    height: 80px;
    font-size: 3rem
}

.header-sm-4 {
    left: 20%;
    top: 10%
}

.overlay-cornershape.open .header-sm-1 {
    animation-delay: .4s
}

.overlay-cornershape.open .header-sm-2 {
    animation-delay: .6s
}

.overlay-cornershape.open .header-sm-3 {
    animation-delay: .8s
}

.overlay-cornershape.open .header-sm-4 {
    animation-delay: 1s
}

@keyframes stretch {
    0%,
    100% {
        transform: scale(1)
    }
    50% {
        transform: scale(1.5)
    }
}

.overlay-cornershape {
    visibility: hidden;
    -webkit-transition: visibility 0s .5s;
    transition: visibility 0s .5s
}

.overlay-cornershape.open {
    visibility: visible;
    -webkit-transition: none;
    transition: none
}

.overlay-cornershape svg {
    position: absolute;
    top: 0;
    left: 0
}

.overlay-cornershape .overlay-path {
    fill: rgba(234, 46, 44, .94)
}

.overlay-cornershape #menu-list,
.overlay-cornershape .header-sm,
.overlay-cornershape .overlay-close {
    opacity: 0;
    -webkit-transition: opacity .4s .4s;
    transition: opacity .4s .4s
}

.overlay-cornershape.open #menu-list,
.overlay-cornershape.open .header-sm,
.overlay-cornershape.open .overlay-close {
    opacity: 1;
    -webkit-transition-delay: .4s;
    transition-delay: .4s
}

.overlay-cornershape.closse #menu-list,
.overlay-cornershape.closse .header-sm,
.overlay-cornershape.closse .overlay-close {
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

#menu-list {
    max-width: 300px;
    position: absolute;
    top: 16%;
    right: 5%;
    text-align: right
}

.banner-content,
.brand-folio,
.brand-portfolio,
.go-bt,
.info-block-tw,
.section-tw {
    text-align: center
}

#menu-list ul {
    margin-bottom: 10px
}

#menu-list a {
    color: #FFF;
    font-size: 1.8rem;
    padding: 10px 0;
    display: block;
    position: relative
}

#menu-list a[href]:after {
    width: 0;
    height: .1rem;
    background: #fff;
    position: absolute;
    bottom: 4px;
    right: 0;
    -webkit-transition: width .2s ease-in-out;
    -moz-transition: width .2s ease-in-out;
    -o-transition: width .2s ease-in-out;
    transition: width .2s ease-in-out
}

#menu-list li li a {
    font-size: 1.2em;
    padding: 2px 0
}

#menu-list li:nth-child(2) a {
    padding-bottom: 5px
}

.banner {

}

.banner-bg {
    background: url(../images/banner.jpg) center center/cover no-repeat
}

.banner-bg-tw {
    background: url(../images/brand-experience.jpg) center center/cover no-repeat
}

.banner-bg-th {
    background: url(../images/portfolio-bg.jpg) top left no-repeat
}

.banner-bg-fr {
    background: url(../images/portfolio-bg.jpg) center center no-repeat
}

.banner-bg-sx {
    background: url(../images/digital-experience/digital-experience.jpg) center center/cover no-repeat
}

.banner-bg-sn {
    background: url(../images/consulting-bg.jpg) center center/cover no-repeat;
    color: #FFF
}

.banner-height-collapse {
    height: auto
}

.banner-height-collapse .folio-cn {
    padding: 10em 0
}

.banner>.container {


}

.banner-content {

}





.brand {
    width: 107px;
    margin: auto
}

.brand-cotact-us {
    position: absolute;
    top: 10%;
    right: 20%
}

.banner-content>h1 {
    color: #FFF;
    margin-top: 1rem;
    margin-bottom: 1em;
    position: relative
}

.banner-content>h1:after {
    width: 60px;
    height: 1px;
    position: absolute;
    bottom: -30px;
    background-color: #f5ebe0;
    margin: auto;
    left: 0;
    right: 0
}

.section-tw {
    background: url(../images/clients-bg.jpg);
    padding: 10em 15px;
    -webkit-animation: 10s linear 0s normal none infinite animate;
    -moz-animation: 10s linear 0s normal none infinite animate;
    -ms-animation: 10s linear 0s normal none infinite animate;
    -o-animation: 10s linear 0s normal none infinite animate;
    animation: 10s linear 0s normal none infinite animate
}

@-webkit-keyframes animate {
    from {
        background-position: 0 0
    }
    to {
        background-position: 1356px 0
    }
}

@-moz-keyframes animate {
    from {
        background-position: 0 0
    }
    to {
        background-position: 1356px 0
    }
}

@-ms-keyframes animate {
    from {
        background-position: 0 0
    }
    to {
        background-position: 1356px 0
    }
}

@-o-keyframes animate {
    from {
        background-position: 0 0
    }
    to {
        background-position: 1356px 0
    }
}

@keyframes animate {
    from {
        background-position: 0 0
    }
    to {
        background-position: 1356px 0
    }
}

.colm-tw {
    max-width: 398px;
    margin: auto
}

.tw-txt {
    font-size: 3rem;
    color: #e42135
}

.panel-title,
.services-heading {
    font-family: clear_sansregular;
    font-size: 1.1em
}

.tw-divider {
    height: 1px;
    background: #e42135;
    position: relative
}

.tw-divider:before {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 30px;
    background: #e42135;
    position: absolute;
    top: -4px;
    margin: auto;
    left: 0;
    right: 0
}

.section-th {
    background-color: #f2f2f2
}

.panel-thumb {
    position: relative;
    display: block
}

.btn-close{position:fixed;}
.go-bt {
    position: absolute;
}

.panel-thumb:after {
    width: 0;
    height: 8px;
    background: rgba(228, 33, 53, 1);
    position: absolute;
    left: 0;
    bottom: 0;
    -webkit-transition: width .2s ease-in-out;
    -moz-transition: width .2s ease-in-out;
    -o-transition: width .2s ease-in-out;
    transition: width .2s ease-in-out
}

.panel-thumb:hover:after {
    width: 100%
}

.panel-body {
    margin-top: 20px
}

.th-ln {
    line-height: 1.1em;
    margin-top: 2px
}

.services-thumb {
    margin-left: 0;
    margin-right: 0
}

.services-heading,
.services-img {
    padding-left: 0;
    padding-right: 0;
    margin-top: 0
}

.services-heading {
    color: #e42135;
    line-height: 1em;
    margin-top: auto
}

.services-list {
    margin-top: 20px
}

.services-list ul {
    padding: 0;
    margin-left: 26px;
    color: #e42135;
    font-size: .8em
}

.services-list span {
    color: #424242;
    font-size: 1.1em
}
.section-tm{
    text-align:center;
    background: #f8f8f8;
}
.carousel-testimonials{
    max-width:785px;
    margin:30px auto 0;
}
/* .carousel-indicators {
    bottom: -4rem;
} */
.carousel-indicators li {
    background: #909090;
    border: 0px;
    max-width:13px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    margin: 0 3px;

}
.carousel-indicators .active {
    background-color: #eb3a38;
}
.testimonials{
    font-size:18px;
}
.testimonial-name{
    font-size:19px;
    font-family: clear_sans_lightregular;
    margin-bottom:0;
}
.testimonial-desig{
    font-size:18px;
    font-family: clear_sans_lightregular;
}
.banner-bg-tw h2,
.heading-th-col {
    color: #FFF;
    max-width: 670px;
    margin: 1em auto;
    line-height: 1.3em
}

.heading-th-col-1 {
    color: #FFF;
    max-width: 800px;
    margin: 1em auto;
    line-height: 1.3em
}

.d-sm {
    display: none
}

.go-bt {
    margin-top: auto;
    bottom: 2rem;
    width: 42px;
    height: 42px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    z-index: 1;
    color: #fff;
    font-size: 40px;
    border: 2px solid #fff;
    border-radius: 40px
}

.go-bt-black {
    color: #000;
    border: 2px solid #000
}

.go-bt:hover {
    color: #ea2e2c;
    border: 2px solid #ea2e2c
}

.mr-2>.btn {
    margin-right: 1em;
    border-radius: .25rem!important;
    font-family: clear_sans_thinregular
}

.address aside,
.team-body {
    font-family: clear_sansregular
}

.mr-2>.btn:last-child {
    margin-right: 0
}

.btn-secondary:hover,
.mixitup-control-active,
.mr-2>.btn:hover {
    background: #e42135;
    color: #fff
}

.branding-grid {
    margin-top: 3em
}

.btn-close {
    display: block;
    width: 43px;
    height: 43px;
    top: 5%;
    right: 5%;
    background: #ea2e2c;
    border-radius: 40px;
    z-index: 999
}

.btn-close:after,
.btn-close:before {
    width: 24px;
    height: 2px;
    background: #fff;
    position: absolute
}

.btn-close:before {
    -webkit-transform: rotate(-45deg) translate(-8px, 21px);
    transform: rotate(-45deg) translate(-8px, 21px)
}

.btn-close:after {
    -webkit-transform: rotate(45deg) translate(22px, 7px);
    transform: rotate(45deg) translate(22px, 7px)
}

.folio-cn {
    display: table-cell
}

.fl-block .col-6 {
    margin-top: 0
}

.fl-block .heading-one {
    line-height: 1em
}

.brand-folio {
    margin: 19% auto 0
}

.brand-portfolio {
    margin: 10% auto 0
}

.brand-logos {
    max-width: 903px;
    margin: 9% auto 3%
}

.colm-nav:after,
.colm-nav:before {
    display: block;
    clear: both
}

.colm-nav a {
    color: #000
}

.colm-nav a:focus,
.colm-nav a:hover {
    color: #606060;
    text-decoration: none
}

.colm-nav a:after {
    display: block;
    width: 30px;
    height: 4px;
    background-color: #ff2834;
    margin-top: 3px
}

.address,
.section-fx {
    background-color: #e42135
}

.colm-next:after {
    margin-left: auto
}

.banner-content-col h1 {
    color: #000;
    margin-top: 1em
}

.banner-content-col h1:after {
    width: 100px;
    height: 2px;
    background-color: #e42135
}

.col-ft a,
.msg-col {
    color: #000
}

.clients {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 20%;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
    padding-right: 15px;
    padding-left: 15px;
    margin-top: 2em
}

.clients img {
    border: 1px solid #ccc
}

.error-msg {
    -moz-animation: RingRing 2000ms linear infinite;
    -ms-animation: RingRing 2000ms linear infinite;
    -o-animation: RingRing 2000ms linear infinite;
    animation: RingRing 2000ms linear infinite;

}
@-webkit-keyframes RingRing {
    0% {
        -webkit-transform: rotate(0deg)
    }
    4% {
        -webkit-transform: rotate(-45deg)
    }
    8% {
        -webkit-transform: rotate(0deg)
    }
    12% {
        -webkit-transform: rotate(-45deg)
    }
    16% {
        -webkit-transform: rotate(0deg)
    }
    20% {
        -webkit-transform: rotate(-45deg)
    }
    24% {
        -webkit-transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(0deg)
    }
}

@-moz-keyframes RingRing {
    0% {
        -moz-transform: rotate(0deg)
    }
    4% {
        -moz-transform: rotate(-45deg)
    }
    8% {
        -moz-transform: rotate(0deg)
    }
    12% {
        -moz-transform: rotate(-45deg)
    }
    16% {
        -moz-transform: rotate(0deg)
    }
    20% {
        -moz-transform: rotate(-45deg)
    }
    24% {
        -moz-transform: rotate(0deg)
    }
    100% {
        -moz-transform: rotate(0deg)
    }
}

@-ms-keyframes RingRing {
    0% {
        -ms-transform: rotate(0deg)
    }
    4% {
        -ms-transform: rotate(-45deg)
    }
    8% {
        -ms-transform: rotate(0deg)
    }
    12% {
        -ms-transform: rotate(-45deg)
    }
    16% {
        -ms-transform: rotate(0deg)
    }
    20% {
        -ms-transform: rotate(-45deg)
    }
    24% {
        -ms-transform: rotate(0deg)
    }
    100% {
        -ms-transform: rotate(0deg)
    }
}

@-o-keyframes RingRing {
    0% {
        -o-transform: rotate(0deg)
    }
    4% {
        -o-transform: rotate(-45deg)
    }
    8% {
        -o-transform: rotate(0deg)
    }
    12% {
        -o-transform: rotate(-45deg)
    }
    16% {
        -o-transform: rotate(0deg)
    }
    20% {
        -o-transform: rotate(-45deg)
    }
    24% {
        -o-transform: rotate(0deg)
    }
    100% {
        -o-transform: rotate(0deg)
    }
}

@keyframes RingRing {
    0% {
        transform: rotate(0deg)
    }
    4% {
        transform: rotate(-45deg)
    }
    8% {
        transform: rotate(0deg)
    }
    12% {
        transform: rotate(-45deg)
    }
    16% {
        transform: rotate(0deg)
    }
    20% {
        transform: rotate(-45deg)
    }
    24% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(0deg)
    }
}	  
.dialog {
    position: fixed;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    z-index:-1;
}
.dialog.dialog--open{
    z-index:4;
}
.dialog, .dialog__overlay {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.dialog__overlay {
    position: absolute;
    z-index: 1;
    background: rgba(55, 58, 71, 0.9);
    opacity: 0;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    -webkit-backface-visibility: hidden;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
}
.dialog__content {
    width: 50%;
    max-width: 560px;
    min-width: 290px;
    background: #fff;
    padding: 2rem;
    text-align: center;
    position: relative;
    z-index: 5;
    opacity: 0;
}
.dialogBtn-open{
    position: absolute;
    top: 0;
    right: 0;
    border-top: 53px solid red;
    border-left: 60px solid transparent;
    width: 0;
    height: 0;
    outline: none;
    color: #fff;
    cursor:pointer;
}
.dialogBtn-open:before{
    position: absolute;
    top: -45px;
    left: -24px;

}
.dialog--open .dialog__overlay {
    opacity: 1;
}
.dialog.dialog--open .dialog__content,
.dialog.dialog--close .dialog__content {
    -webkit-animation-duration: 0.4s;
    animation-duration: 0.4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.dialog.dialog--open .dialog__content {
    -webkit-animation-name: anim-open;
    animation-name: anim-open;
    -webkit-animation-timing-function: cubic-bezier(0.6,0,0.4,1);
    animation-timing-function: cubic-bezier(0.6,0,0.4,1);
}

.dialog.dialog--close .dialog__content {
    -webkit-animation-name: anim-close;
    animation-name: anim-close;
}

@-webkit-keyframes anim-open {
    0% { opacity: 0; -webkit-transform: scale3d(0, 0, 1); }
    100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); }
}

@keyframes anim-open {
    0% { opacity: 0; -webkit-transform: scale3d(0, 0, 1); transform: scale3d(0, 0, 1); }
    100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}

@-webkit-keyframes anim-close {
    0% { opacity: 1; }
    100% { opacity: 0; -webkit-transform: scale3d(0.5, 0.5, 1); }
}

@keyframes anim-close {
    0% { opacity: 1; }
    100% { opacity: 0; -webkit-transform: scale3d(0.5, 0.5, 1); transform: scale3d(0.5, 0.5, 1); }
}
.enquire-header{
    font-size: 22px;
    margin-bottom: 2px;
    font-family: clear_sans_lightregular;
}
.show-error{
    color: #F00;
    height: 15px;
    font-size: 15px;
    line-height: 15px;
    margin-bottom: 6px;

}
footer {
    background: url(../images/portfolio-bg.jpg) top left no-repeat;
    padding: 11em 0 10em
}

.col-ft,
.colm-ftt {
    margin-top: 0
}

.col-ft:last-child {
    text-align: right
}

.col-ft ul {
    padding: 0
}

.col-ft a {
    padding: 3px 0;
    display: block
}

.col-ft a:focus,
.col-ft a:hover {
    color: #ea2e2c
}

#media {
    padding: 0;
    margin-top: 5px
}

#media li {
    display: inline-table
}

#media a {
    display: table-cell;
    border-radius: 30px;
    width: 35px;
    height: 35px;
    text-align: center;
    color: #fff;
    font-size: 1rem
}

#media li:first-child a {
    background: #4e71a8
}

#media li:nth-child(2) a {
    background: #1cb7eb;
    font-size: 1.2rem
}

#media li:nth-child(3) a {
    background: #1686b0
}

#media li:nth-child(4) a {
    background: url(../images/in-bg.png);
    font-size: 1.3rem
}

#media li:focus a,
#media li:hover a {
    background: #e42135
}

@media screen and (min-width:991px) {
    #menu-list a[href]:hover::after {
        width: 100%
    }
}

@media screen and (max-width:1199px) {
    .btn-cc {
        display: block
    }
    .btn-cc .btn {
        margin-bottom: 1rem
    }
}

@media screen and (max-width:991px) {
    .clients {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }
    .services-heading {
        font-size: 1em
    }
    #media a{
        width: 29px;
        height: 29px;
    }
}

@media screen and (max-width:767px) {
    .banner-bg-fv .container,
    .panel-thumb img,
    .services-img img {
        width: 100%
    }
    .services-heading {
        margin-top: 25px
    }
    .clients {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 33.333333%;
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%
    }
    .bd-featurette {
        padding-top: 3rem;
        padding-bottom: 3rem
    }
    .colm-ftt {
        text-align: center
    }
    .colm-ftt:first-child {
        margin-bottom: 1rem
    }
    .col-ft ul {
        margin-bottom: 0
    }
    .col-ft li {
        display: inline-block;
        vertical-align: middle
    }
    .col-ft li a {
        padding: 0 5px
    }
    .col-ft:last-child {
        text-align: center;
        margin-top: .9rem
    }
    #media a{
        width: 35px;
        height: 35px;
    }
}

@media screen and (max-width:480px) {
    .header-sm,
    .hide-sm {
        display: none
    }
    #menu-list a {
        padding: 0;
        font-size: 1.3rem
    }
    .banner-content>h1 {
        margin-top: 1rem;
        font-size: 1.5rem
    }
    .heading-th-col,
    .heading-th-col-1 {
        font-size: 1rem
    }
    .d-sm {
        display: inline
    }
    .banner-content>h1::after {
        bottom: -13px
    }
    .heading-one {
        font-size: 2em
    }
    .banner-bg-tw h2 {
        font-size: 1rem;
        margin-bottom: 3rem
    }
    .go-bt {
        bottom: 1rem
    }
    .btn-cc .btn {
        margin-bottom: .6rem;
        padding: .3rem;
        font-size: 1rem
    }


}
.clients {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%
}
.heading-tw {
    font-size: 1.5rem
}
.banner-content-col h1::before {
    bottom: -16px
}
.team {
    margin-top: 1rem
}
.brand-cotact-us {
    display: none
}
.address {
    width: auto;
    left: 15px;
    right: 15px
}
.folio-cn .row {
    display: block
}
.folio-cn .row .col-6 {
    width: auto;
    display: block;
    max-width: none
}
.folio-cn .row .col-6:first-child {
    margin-bottom: 20px
}
.colm-ftt img {
    width: 70px
}
.testimonials{
    font-size:16px;
}
.testimonial-name{
    font-size:16px;
}
.testimonial-desig{
    font-size:16px;
}


@media screen and (max-width:360px) {
    .brand {
        width: 70px;
        margin: 10% auto 0
    }
    .tw-txt {
        font-size: 2.4rem
    }
    .btn-cc .btn,
    .col-ft li a,
    .col-ft:last-child {
        font-size: .8rem
    }
}

.jd-li {
    color: #696868;
    font-weight: 300;
    font-size: 18px;
}

.jd-li li {
    margin-bottom: 10px;
}

.sitemap-mainlink {
    font-weight: bold !important;
}
.sitemap-sublinks li {
    margin-left: 30px;
    list-style: circle !important;
}

#croCalculator .control-label, #croCalculator .col-form-label {
    font-size: 14px;
}

.text-align-left  {
    text-align: left;
}

.text-align-right  {
    text-align: right;
}

.text-align-center  {
    text-align: center;
}

.text-rd1 {
    line-height: 40px !important;
}


.v-center {
    height: 500px;
}

.v-center h1 {
    position: relative;
    top: 170px;
}

.v-center h2 {
    position: relative;
    top: 140px;
}


/* Extra Small, Small devices (landscape phones, 0px and up) */
@media only screen and (min-width: 0px) {
    .banner, .banner-in {
        margin: 0px;
        padding: 0px;
    }
    
    .calculator-title {
        font-size: 1.5em;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media only screen and (min-width: 576px) {
    .banner, .banner-in {
        margin: 0px;
        padding: 0px;
    }

    .banner-tools-and-calculators {
        margin: 0px; 
    }
}

/* Large devices (desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .banner, .banner-in {
        padding: 50px 0em;
        margin-top: 57px;
    }
    
    .banner-tools-and-calculators {
        margin-top: 120px; 
    }
    
    .calculator-title {
        font-size: 2em;
    }
}


/* Large devices (desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .banner, .banner-in {
        margin-top: 75px;
        height: 500px;
        padding: 0px;
    }
    
    /*
    .banner-visualize .container {
        max-width: 100%;
    }
    */

    #croCalculator .col-form-label {
        text-align: right;
    }

    .container-tools {
        max-width: 1240px;
    }


}


/*
 Home Page Form
 */

.form-home .check {
    width: 45px !important;
}

.form-home .check-group {
    margin-bottom: 1em; padding-left: 0;
}