@font-face {
    font-family: Beyonce_demo;
    src: url(../fonts/beyonce_demo/Beyonce_demo.eot);
    font-family: proxima_ssv;
    src: url(../fonts/proxima_ssv/ProximaNova-Regular.otf);
    font-family: proxima_ssv;
    src: url(../fonts/proxima_ssv/ProximaNova-Regular.woff2);
    font-family: proxima_ssv;
    src: url(../fonts/proxima_ssv/ProximaNova-Regular.woff);
    font-family: proxima_ssv;
    src: url(../fonts/proxima_ssv/ProximaNova-Regular.ttf);
    font-family: proxima_ssv;
    src: url(../fonts/proxima_ssv/ProximaNova-Regular.svg);
    src: url(../fonts/beyonce_demo/Beyonce_demo.eot?#iefix) format('embedded-opentype'), url(../fonts/beyonce_demo/Beyonce_demo.woff2) format('woff2'), url(../fonts/beyonce_demo/Beyonce.woff) format('woff'), url(../fonts/beyonce_demo/Beyonce.ttf) format('truetype'), url(../fonts/beyonce_demo/Beyonce.svg#Beyonce_demo) format('svg');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: proxima_nova_alt_rgregular;
    src: url(../fonts/proxima_ssv/FontsFree-Net-ProximaNovaAltRegular.ttf);
    font-weight: 400;
}

@font-face {
    font-family: 'proxima_nova_alt_rgregular';
    src: url('../fonts/proxima_ssv/FontsFree-Net-ProximaNovaAltRegular (1).eot');
    src: url('../fonts/proxima_ssv/FontsFree-Net-ProximaNovaAltRegular (1).eot?#iefix') format('embedded-opentype'), url('../fonts/proxima_ssv/FontsFree-Net-ProximaNovaAltRegular (1).woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ProximaNovaA-Regular';
    src: url('../fonts/proxima_ssv/ProximaNovaA-Regular.svg#ProximaNovaA-Regular') format('svg'), url('../fonts/proxima_ssv/ProximaNovaA-Regular.ttf') format('truetype'), url('../fonts/proxima_ssv/ProximaNovaA-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

#read {
    position: relative;
    top: -10px;
    color: #fff;
    left: 104%;
    font-size: 14px;
    font-weight: 700;
    border: 2px solid;
    padding: 7px
}

.asasa {
    color: #fff !important;
    font-weight: 700;
    letter-spacing: 3px;
    font-size: 60px;
    padding: 0;
    margin: 0
}

.all_services--arrow .link--white:after,
.all_services--arrow .link--white:before {
    background-image: url(../images/left-arrow.png)
}

.all_services--arrow:before {
    transform: translateY(-50%) translateX(-100%);
    opacity: 0
}

.all_services--arrow:hover::before {
    transform: translateY(-50%) translateX(0);
    opacity: 1
}

.all_services--arrow:after {
    right: 0;
    opacity: 1
}

.all_services--arrow:hover::after {
    transform: translateY(-50%) translateX(0);
    opacity: 0
}

.all_services--arrow:after,
.all_services--arrow:before {
    content: "";
    background-size: 20px 15px;
    width: 20px;
    height: 15px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.all_services--arrow span,
.all_services--arrow:after,
.all_services--arrow:before {
    display: inline-block;
    transition: transform .3s, opacity .3s
}

.all_services--arrow {
    outline: 0;
    background: 0 0;
    border: none;
    display: inline-block;
    overflow: hidden;
    position: relative;
    font-weight: 300;
    font-size: 1.6rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding-right: 40px;
    margin-top: 110px;
    transition: all .3s;
    color: #fff
}

.all_services--arrow.link--white {
    color: #fff
}

.all_services--arrow:hover {
    font-weight: 700;
    color: #fff
}

.all_services--arrow:hover span {
    transform: translateX(40px)
}

.home_testimonials_main {
    background-color: #000;
    background-image: url(../images/home_testimonial_back.jpg);
    background-repeat: no-repeat;
    background-size: cover
}

.home_services_back {
    background-image: url(../images/services_back.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 700px;
    text-align: center
}

.footer_bot {
    background-color: #191919;
    padding: 12px;
    text-align: center
}

.location_boxes {
    background-color: #1e1e1e;
    padding: 40px 0 80px
}

.location_box1 {
    min-height: 406px;
    background-image: url(../images/location_box1_hover.jpg);
    background-repeat: no-repeat;
    color: #fff;
    font-family: Lato;
    padding: 35px
}

.location_box1 h1 {
    color: #fff !important;
    font-family: Lato;
    font-size: 26px;
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: 2px solid #fff;
    width: 40%;
    padding-bottom: 10px
}

.location_box1 h2 {
    color: #fff;
    font-family: Lato;
    font-size: 18px;
    font-weight: 400;
    width: 80%;
    line-height: 20px;
    padding-bottom: 5px;
    padding-left: 35px
}

.location_box1 h3 {
    color: #fff;
    font-family: Lato;
    font-size: 54px;
    font-weight: bolder;
    padding-left: 50px;
    margin-top: 30px
}

.location_box1 img {
    float: right;
    padding-right: 80px;
    padding-top: 30px;
    opacity: 0;
    transition: 1s
}

.location_box1:hover {
    background-image: url(../images/location_box1.jpg)
}

.location_box1:hover img {
    padding-right: 40px;
    opacity: 1
}

.location_box2 {
    min-height: 406px;
    background-image: url(../images/location_box2.jpg);
    background-repeat: no-repeat;
    color: #fff;
    font-family: Lato;
    padding: 35px;
    transition: 1s
}

.location_box2 h1 {
    color: #fff !important;
    font-family: Lato;
    font-size: 26px;
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: 2px solid #fff;
    width: 35%;
    padding-bottom: 10px
}

.location_box2 h2 {
    color: #fff;
    font-family: Lato;
    font-size: 18px;
    font-weight: 400;
    width: 80%;
    line-height: 20px;
    padding-bottom: 5px;
    padding-left: 35px
}

.location_box2 h3 {
    color: #fff;
    font-family: Lato;
    font-size: 54px;
    font-weight: bolder;
    padding-left: 50px;
    margin-top: 30px
}

.location_box2 img {
    float: right;
    padding-right: 80px;
    padding-top: 30px;
    opacity: 0;
    transition: 1s
}

.location_box2:hover {
    background-image: url(../images/location_box2_hover.jpg)
}

.location_box2:hover img {
    padding-right: 40px;
    opacity: 1
}

.location_icon {
    background-image: url(../images/box_location_icon.png);
    background-repeat: no-repeat
}

.message_icon {
    background-image: url(../images/box_message_icon.png);
    background-repeat: no-repeat
}

.phone_icon {
    background-image: url(../images/box_phone_icon.png);
    background-repeat: no-repeat
}

.testimonial_section {
    background-image: url(../images/ucohome/testimonials_background.jpg);
    background-color: #000
}

.upper_footer {
    background-color: #1d2621;
    padding-top: 60px;
    text-align: center;
    background-image: url(../images/upper_footer.jpg);
    height: 330px
}

.upper_footer_img {
    height: 200px;
    margin: 0 180px;
    transition: all .2s linear;
    margin-top: 50px;
    background-image: url(../images/upper_footer_logo_hover.png);
    background-repeat: no-repeat;
    background-position: center
}

.upper_footer_img:hover {
    margin-top: 0;
    background-image: url(../images/upper_footer_logo_hover.png);
    background-repeat: no-repeat;
    background-position: center
}

.footer_new {
    background-color: #232323
}

.work_bottom {
    background-image: url(../images/work_bottom.jpg);
    background-repeat: no-repeat;
    background-color: #000;
    text-align: center;
    padding-bottom: 180px
}

.work_bottom h1 {
    font-size: 56px;
    color: #fff !important;
    padding-top: 20px;
    padding-bottom: 15px
}

.link--arrow.link--white:after,
.link--arrow.link--white:before {
    background-image: url(../images/left-arrow.png)
}

.link--arrow:before {
    transform: translateY(-50%) translateX(-100%);
    opacity: 0
}

.link--arrow:hover::before {
    transform: translateY(-50%) translateX(0);
    opacity: 1
}

.link--arrow:after {
    opacity: 1
}

.link--arrow:hover::after {
    transform: translateY(-50%) translateX(0);
    opacity: 0
}

.link--arrow:after,
.link--arrow:before {
    content: "";
    background-size: 20px 15px;
    width: 20px;
    height: 15px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.link--arrow span,
.link--arrow:after,
.link--arrow:before {
    display: inline-block;
    transition: transform .3s, opacity .3s
}

.link--arrow {
    outline: 0;
    background: 0 0;
    border: none;
    display: inline-block;
    overflow: hidden;
    position: relative;
    font-weight: 300;
    font-size: 1.6rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding-right: 40px;
    transition: all .3s
}

.link--arrow.link--white {
    color: #fff;
    margin-top: 0
}

.link--arrow:hover {
    font-weight: 700
}

.link--arrow:hover span {
    transform: translateX(40px)
}

.bottom-cta {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 120px 0
}

.bottom-cta__title {
    font-family: Oswald, sans-serif;
    font-weight: 500;
    z-index: 10;
    align-items: center;
    color: transparent;
    text-transform: uppercase;
    font-size: 14.4rem;
    text-decoration: none;
    -webkit-text-stroke: .1rem rgba(255, 255, 255, .5);
    padding-bottom: 4rem;
    transition: .4s ease-in-out
}

.bottom-cta__title>div>div {
    padding: 0 1.6rem
}

.bottom-cta p {
    overflow: hidden;
    color: #ff1c3b;
    font-size: 2.2rem;
    line-height: 1.6rem;
    height: 2rem
}

.bottom-cta p span {
    position: relative;
    overflow: hidden;
    display: inline-block;
    height: 2rem
}

.bottom-cta p span .bar {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #ff1c3b;
    top: 0;
    left: 0;
    transform: translateX(-101%)
}

.bottom-cta__image {
    position: absolute;
    width: 40rem;
    overflow: hidden;
    height: 39rem;
    margin-top: -2.4rem
}

.bottom-cta__image-inner {
    overflow: hidden;
    height: 400px
}

.bottom-cta__image img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    z-index: 1
}

.section--dark {
    background-color: #1f2823
}

.wrapper--home .section--bottom-cta .section__inner {
    padding-top: 32rem
}

.section__inner--flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap
}

.section__inner {
    position: relative;
    width: 100%;
    border-left: .1rem solid rgba(255, 255, 255, .05);
    border-right: .1rem solid rgba(255, 255, 255, .05);
    padding: 0;
    z-index: 10
}

.section__inner:before {
    position: absolute;
    width: 50%;
    height: 100%;
    left: 50%;
    top: 0;
    margin-left: -25%;
    border-left: .1rem solid rgba(255, 255, 255, .05);
    border-right: .1rem solid rgba(255, 255, 255, .05);
    content: '';
    pointer-events: none
}

.bottom-cta__title:hover {
    -webkit-text-stroke: .1rem transparent
}

.image-slider__slide {
    position: relative;
    display: block;
    margin-bottom: 50px;
    filter: drop-shadow(0px 0px 14px #000);
}

.image-slider__details1 {
    position: absolute;
    width: 100%;
    top: 0;
    left: 30px;
    opacity: 0;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition: all .4s ease-in-out .2s;
    transition: all .7s ease-in-out .2s;
    color: #fff042;
    padding: 5vw;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    height: 100%
}

.image-slider__slide:hover .image-slider__details1 {
    opacity: 1;
    -webkit-transform: translate(0, -12%);
    transform: translate(0, -12%)
}

.image-slider__name1 {
    color: #fff;
    font-size: 55px;
    font-weight: 600;
    width: 100%;
    line-height: 5.2vw;
    margin: 0;
    align-self: flex-end;
    text-align: left;
    position: absolute;
    left: -20px;
    bottom: -20px
}

.image-slider__details {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    opacity: 0;
    -webkit-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
    -webkit-transition: all .4s ease-in-out .2s;
    transition: all .4s ease-in-out .2s;
    color: #fff042;
    padding: 5vw;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    height: 100%
}

.image-slider__slide:hover .image-slider__details {
    opacity: 1;
    -webkit-transform: translate(-50%, -80%);
    transform: translate(-50%, -80%)
}

.image-slider__text {
    color: #fff;
    text-align: right;
    font-size: 1.77vw;
    width: 100%;
    font-weight: 300
}

.image-slider__name {
    color: #fff042;
    font-size: 55px;
    font-weight: 600;
    width: 100%;
    line-height: 5.2vw;
    margin: 0;
    align-self: flex-end;
    text-align: center
}

.overlay_voilet {
    position: absolute;
    mix-blend-mode: multiply;
    -webkit-transition: all .4s ease-in-out 0s;
    transition: all .4s ease-in-out 0s;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    background-color: #5e2893;
    opacity: 0
}

.image-slider__slide:hover .overlay_voilet {
    opacity: 1
}

.overlay_yellow {
    position: absolute;
    mix-blend-mode: multiply;
    -webkit-transition: all .4s ease-in-out 0s;
    transition: all .4s ease-in-out 0s;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    background-color: #f41b44;
    opacity: 0
}

.image-slider__slide:hover .overlay_yellow {
    opacity: 1
}

.image-slider__slide-overlay {
    position: absolute;
    mix-blend-mode: multiply;
    -webkit-transition: all .4s ease-in-out 0s;
    transition: all .4s ease-in-out 0s;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    background-color: #00adb1;
    opacity: 0
}

.image-slider__slide:hover .image-slider__slide-overlay {
    opacity: 1
}

.home_work_section {
    background-color: #040404;
    padding: 100px 0 0
}

.home_work_section_left img {
    width: 100%;
    margin-right: 50px
}

.home_work_section img {
    width: 100%;
}

.home_work_section_left {
    background-color: #000
}

.home_work_section_right {
    padding-top: 170px
}

#top_fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0
}

#b {
    margin-top: 60%
}

.home_about_section {
    background-color: #222020
}

.aaaaa {
    position: absolute;
    top: 28%;
    left: 37%
}

.we_are_hero1 {
    font-family: Lato;
    letter-spacing: 3px;
    font-size: 60px;
    color: #fff !important;
    font-weight: 100;
    line-height: 60px !important;
    position: absolute;
    top: 30%;
    left: 20%;
    width: 40%;
    margin: 0 auto;
    text-shadow: 0 0 25px #131313;
    text-align: left
}

.we_are_hero1 h1 {
    color: #fff !important;
    font-weight: 100;
    margin: 0;
    letter-spacing: 3px;
    font-size: 60px
}

.we_are_hero1 h2 {
    color: #fff !important;
    font-weight: 700;
    letter-spacing: 3px;
    font-size: 60px;
    padding: 0;
    margin: 0
}

.we_are_hero1 p {
    color: #fff !important;
    font-weight: 500;
    font-size: 10px;
    font-family: Lato !important;
    padding-top: 0;
    margin: 0
}

.scroll-down {
    position: absolute;
    width: 150px;
    bottom: 20px;
    left: 50%;
    margin-left: -75px;
    z-index: 50;
    display: block;
    text-align: center;
    font-size: 12px;
    -webkit-font-smoothing: antialiased
}

.btn,
.scroll-down {
    white-space: nowrap
}

.scroll-down .icon {
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    width: 26px;
    height: 44px;
    display: block;
    border-radius: 13px;
    border: 2px solid #b3b3b3;
    margin: 0 auto
}

.scroll-down .icon:before,
.scroll-down span {
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease
}

.scroll-down .icon:before {
    transition: all .3s ease;
    width: 6px;
    height: 6px;
    -webkit-animation: scrollDownKnobAnimation 2s ease infinite;
    -moz-animation: scrollDownKnobAnimation 2s ease infinite;
    -o-animation: scrollDownKnobAnimation 2s ease infinite;
    animation: scrollDownKnobAnimation 2s ease infinite;
    position: absolute;
    top: 6px;
    border-radius: 50%;
    background-color: #b3b3b3;
    content: '';
    left: 50%;
    margin-left: -3px
}

a:active,
a:hover {
    outline: 0
}

a:focus,
a:hover {
    color: #23527c
}

*,
:after,
:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.video_over {
    background-image: url(../images/video_over.png);
    width: 100%;
    min-height: 750px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9
}

.img-zoom {
    padding-top: 10px;
    transform: scale(1);
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out
}

.img-zoom:hover {
    transform: scale(1.2)
}

.width_100 {
    width: 100% !important
}

.pad_0 {
    padding: 0 !important
}

.blog_arrow_position {
    position: absolute;
    bottom: 75px;
    right: 110px
}

.blog_arrow_position1 {
    position: absolute;
    bottom: 15px;
    right: 40px
}

.footer_icons_text {
    color: #f0f8ff;
    padding-top: 15px;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px
}

.footer_icons_row {
    margin: 0 auto;
    margin-bottom: 50px
}

.footer_icons {
    width: 95px;
    height: 95px;
    line-height: 95px;
    border-radius: 50%;
    background: #2d3544;
    margin: 0 auto
}

.footer_icons_title {
    font-family: Lato;
    font-size: 18px;
    font-weight: 500;
    margin-top: 15px;
    color: #fff;
    border-bottom: 1px solid #333 !important
}

.home_testimonial_title {
    font-size: 50px;
    margin: 0;
    color: #fff !important;
    text-align: center;
    font-family: Lato;
    padding-bottom: 10px;
    padding-top: 100px
}

.skills_projects_boxes {
    padding: 0 15% 3% 15%
}

.skills_main_background {
    background-color: #15141a;
    background-image: url(../images/ucohome/1111.svg);
    background-position: top right;
    background-size: 100%;
    background-repeat: no-repeat
}

.skills_bg {
    background-color: #1c1f28 !important
}

* {
    margin: 0;
    padding: 0
}

body {
    background: #fff;
    font-weight: 400;
    position: relative;
    font-size: 14px;
    font-family: Montserrat, sans-serif
}

#wrap {
    position: relative;
    width: 100%;
    overflow: hidden
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400;
    color: #141414;
    font-family: Montserrat, sans-serif;
    font-weight: 700
}

h1 {
    font-size: 42px
}

h2 {
    font-size: 36px;
    font-weight: 700
}

h3 {
    font-size: 30px
}

h4 {
    font-size: 24px
}

h5 {
    font-size: 18px
}

h6 {
    font-size: 14px;
    font-weight: 700
}

a {
    text-decoration: none !important;
    font-family: Montserrat, sans-serif
}

ul {
    margin-bottom: 0
}

li {
    list-style: none
}

a {
    text-decoration: none;
    color: #141414
}

p.intro-small {
    font-style: italic;
    color: #f5f5f5;
    width: 80%;
    margin: 0 auto
}

section {
    position: relative;
    overflow: hidden;
    width: 100%;
    background: #fff
}

.slides-inner h5 {
    margin: 0
}

.btn {
    background: #eeb013;
    display: inline-block;
    font-size: 12px;
    text-transform: uppercase;
    padding: 10px 50px;
    font-weight: 700;
    border-radius: 0;
    letter-spacing: 1px;
    color: #141414;
    position: relative;
    overflow: hidden
}

.l-left {
    float: left;
    position: relative;
    z-index: 999;
    padding-top: 2px;
    padding-left: 50px;
    line-height: 69px
}

.l-left_icon {
    float: left;
    position: relative;
    z-index: 999;
    padding-top: 10px;
    padding-left: 50px
}

.l-left_icon img {
    opacity: 1
}

.l-right {
    float: right
}

.display_none_for_desktop {
    display: none
}

.topnav_services_formobile {
    padding-top: 15px;
    padding-left: 30px
}

.topnav_services_formobile a {
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    line-height: 18px
}

.wistia_embed {
    width: 100%;
    max-height: 450px;
    border: 0
}

.animation-element {
    opacity: 0;
    position: relative
}

.animation-element.slide-left {
    opacity: 0;
    -moz-transition: all .5s linear;
    -webkit-transition: all .5s linear;
    -o-transition: all .5s linear;
    transition: all .5s linear;
    -moz-transform: translate3d(-500px, 0, 0);
    -webkit-transform: translate3d(-500px, 0, 0);
    -o-transform: translate(-500px, 0);
    -ms-transform: translate(-500px, 0);
    transform: translate3d(-500px, 0, 0)
}

.animation-element.slide-left1 {
    opacity: 0;
    -moz-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
    -moz-transform: translate3d(-300px, 0, 0);
    -webkit-transform: translate3d(-300px, 0, 0);
    -o-transform: translate(-300px, 0);
    -ms-transform: translate(-300px, 0);
    transform: translate3d(-300px, 0, 0)
}

.animation-element.slide-right {
    opacity: 0;
    -moz-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
    -moz-transform: translate3d(500px, 0, 0);
    -webkit-transform: translate3d(500px, 0, 0);
    -o-transform: translate(500px, 0);
    -ms-transform: translate(500px, 0);
    transform: translate3d(500px, 0, 0)
}

.animation-element.slide-right1 {
    opacity: 0;
    -moz-transition: all .5s linear;
    -webkit-transition: all .5s linear;
    -o-transition: all .5s linear;
    transition: all .5s linear;
    -moz-transform: translate3d(300px, 0, 0);
    -webkit-transform: translate3d(300px, 0, 0);
    -o-transform: translate(300px, 0);
    -ms-transform: translate(300px, 0);
    transform: translate3d(300px, 0, 0)
}

.animation-element.slide-left.in-view,
.animation-element.slide-left1.in-view {
    opacity: 1;
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate3d(0, 0, 0);
    border: none;
}

.animation-element.slide-right.in-view,
.animation-element.slide-right1.in-view {
    opacity: 1;
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate3d(0, 0, 0);
    border: none;
}

.services_slides_banners {
    height: 100vh;
    display: flex;
    position: relative;
    flex-direction: column;
    width: 100vw
}

.home_ourwork_img {
    padding: 0
}

.home_ourwork_main {
    height: 100vh
}

.vertical_full {
    height: 100vh
}

.flip_iona {
    transition: 1s;
    background-image: url(../images/work/new/img-6.jpg);
    background-repeat: no-repeat;
    width: 100%;
    position: absolute;
    background-size: cover;
    background-color: bisque
}

.flip_iona:hover {
    background-image: url(../images/work/new/img-6_hover.jpg);
    background-repeat: no-repeat;
    background-size: cover
}

.flip_lobital {
    width: 100%;
    height: 250px;
    background-image: url(../images/work/new/img-2.jpg);
    background-size: cover;
    text-align: center;
    transition: 1s
}

.flip_lobital:hover {
    width: 100%;
    height: 250px;
    background-image: url(../images/work/new/img-2_hover.jpg);
    background-size: cover
}

.flip_box_iona {
    background-image: url(../images/work/new/img-6.jpg);
    background-repeat: no-repeat;
    width: 100%;
    position: absolute;
    background-size: cover
}

.flip_box_iona1 {
    background-image: url(../images/work/new/img-6_hover.jpg);
    background-repeat: no-repeat;
    width: 100%;
    position: absolute;
    background-size: cover;
    left: 500px;
    transition: transform 1s
}

.flip-box_gayze {
    background-image: url(../images/work/new/img-3.jpg);
    position: absolute;
    width: 100%;
    height: 250px;
    background-size: cover;
    transition: 1s
}

.flip-box_gayze:hover {
    background-image: url(../images/work/new/img-3_hover.jpg)
}

.flip-box-inner_gayze {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 1s
}

.flip-box_gayze:hover .flip-box-inner_gayze {
    transform: rotate(180deg)
}

.flip-box-back_gayze,
.flip-box-front_gayze {
    position: absolute;
    width: 100%;
    height: 100%;
    visibility: visible
}

.flip-box-front_gayze {
    color: #000;
    transform: rotate(0)
}

.flip-box-back_gayze {
    background-color: #555;
    color: #fff;
    transform: rotate(180deg)
}

.flip-box {
    background-color: transparent;
    width: 100%;
    height: 100vh;
    perspective: 1000px
}

.flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform .8s;
    transform-style: preserve-3d
}

.flip-box:hover .flip-box-inner {
    transform: rotateY(180deg)
}

.flip-box-back,
.flip-box-front {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden
}

.flip-box-front {
    background-color: #bbb;
    color: #000;
    background-image: url(../images/work/new/img-4_hover.jpg);
    background-size: cover
}

.flip-box-back {
    background-color: #555;
    color: #fff;
    transform: rotateY(180deg);
    background-image: url(../images/work/new/img-4.jpg);
    background-size: cover
}

.flip-box-back h2 {
    color: #fff;
    line-height: 100%
}

.view_all_float_button a {
    position: absolute;
    width: 130px;
    height: 110px;
    background-color: #833ab4;
    color: #fdd71d;
    z-index: 999999;
    right: 0;
    padding: 7px;
    top: 50px;
    border-radius: 18px;
    box-shadow: 0 30px 100px #000;
    text-align: center;
    font-family: beyonce;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 4px;
    padding-top: 20px;
    line-height: 36px;
    text-shadow: 0 0 30px #000
}

.view_all_float_button a:hover {
    color: #fff
}

.image_grayscale {
    height: 420px;
    background-image: url(../images/work/new/img-1_hover.jpg);
    background-size: cover;
    transition: 1s
}

.image_grayscale:hover {
    background-image: url(../images/work/new/img-1.jpg);
    background-size: cover
}

.flip-box3 {
    height: 420px;
    width: 100%;
    background-image: url(../images/work/new/img-5_hover.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    transition: 1.5s
}

.flip-box3:hover {
    height: 420px;
    background-image: url(../images/work/new/img-5.jpg)
}

.flip-box1 {
    background-color: transparent;
    perspective: 1000px
}

.flip-box-inner1 {
    position: relative;
    text-align: center;
    transition: transform .8s;
    transform-style: preserve-3d
}

.flip-box1:hover .flip-box-inner1 {
    transform: rotateX(180deg)
}

.flip-box-back1,
.flip-box-front1 {
    width: 100%;
    height: 100%;
    backface-visibility: hidden
}

.flip-box-front1 {
    color: #000
}

.flip-box-back1 {
    background-color: #555;
    color: #fff;
    transform: rotateY(180deg)
}

.flip-box-back1 h2 {
    color: #fff;
    line-height: 100%
}

.forMobile {
    display: none
}

.video_image {
    border-radius: 7px;
    background-image: url(../images/testimonials/1.1.jpg);
    background-position: top right;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 5%;
    height: 430px
}

.video_image img {
    width: 70px;
    height: 70px;
    text-align: center;
    margin: 0 auto;
    left: 46%;
    top: 40%;
    position: absolute
}

.home_testimonial_main {
    padding: 50px 0;
    height: 670px
}

.home_testimonial_left {
    padding: 70px 50px 70px 132px;
    margin-top: 10px
}

.home_testimonial_left h1 {
    color: #e2e2e2 !important;
    font-size: 21px;
    line-height: 46px;
    font-family: Lato;
    font-weight: 100
}

.home_testimonial_left p {
    padding-top: 15px;
    font-size: 15px;
    color: #7b7b7b
}

.home_video_banner_text {
    background: rgb(0, 0, 0, .6);
    padding: 15px;
    width: 40%;
    height: 63%;
    position: absolute;
    border-radius: 10px;
    z-index: 9;
    top: 23%;
    left: 10%;
    color: #fff;
    font-family: clear sans
}

.red_arrow1 {
    text-align: right;
    padding-right: 20px;
    padding-bottom: 10px
}

.white_arrow1 {
    text-align: right;
    padding-right: 20px;
    padding-bottom: 10px
}

.home_video_banner_text h1 {
    text-align: left;
    font-family: lato;
    font-size: 44px;
    font-weight: bolder;
    padding-left: 30px;
    color: #fff;
    background-size: 200%;
    background-image: none;
    background-image: linear-gradient(45deg, #fff070 0, #fff 35%, #ffd3 66%, #d7edff 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    animation: glow 9s linear infinite
}

span.stretch {
    display: inline-block;
    -webkit-transform: scale(4, 1);
    -moz-transform: scale(4, 1);
    -ms-transform: scale(4, 1);
    -o-transform: scale(4, 1);
    transform: scale(4, 1);
    margin-right: 20px;
    font-size: 18px
}

.home_video_banner_text ul {
    text-align: left;
    padding-left: 40px;
    padding-top: 20px
}

.home_video_banner_text ul li {
    font-family: clear sans;
    font-weight: 400;
    font-size: 20px;
    padding-bottom: 12px
}

.home_video_banner_text ul li a {
    color: #fff
}

.home_video_banner_text ul li a:hover {
    color: #f3b62c
}

.techno_text {
    padding: 12% 0 12% 5%
}

.technology h1 {
    font-size: 60px;
    color: #fff;
    font-weight: 600;
    font-family: quantify;
    text-shadow: 0 0 34px #8c4b1a
}

.technology p {
    padding-top: 20px;
    color: #fff;
    font-size: 22px;
    line-height: 35px;
    font-family: lato;
    padding-bottom: 30px
}

.technology {
    background: #f6f6f6;
    background-image: url(../images/ucohome/skills-bg.jpg);
    background-size: cover;
    padding-top: 7%;
    min-height: 740px
}

.techImages {
    padding-left: 10%
}

.technology .techImages>li {
    float: left;
    list-style: none;
    margin: 0 10px;
    text-align: center;
    width: 90px;
    transition: 1s
}

.technology .techImages>li .tech {
    height: 90px;
    width: 90px;
    margin-bottom: 20px;
    transition: 1s
}

.tech_cake:hover {
    background-image: url(../images/techno/cake.png) !important;
    animation-name: floating;
    animation-duration: .7s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    transition: 1s
}

.tech_cake {
    background-image: url(../images/techno/cake_hover.png) !important;
    background-position: center;
    background-size: 100% 100%
}

.tech_ionic:hover {
    background-image: url(../images/techno/ionic.png) !important;
    animation-name: floating;
    animation-duration: .7s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    transition: 1s
}

.tech_ionic {
    background-image: url(../images/techno/ionic_hover.png) !important;
    background-position: center;
    background-size: 100% 100%
}

.tech_typescript:hover {
    background-image: url(../images/techno/typescript.png) !important;
    animation-name: floating;
    animation-duration: .7s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    transition: 1s
}

.tech_typescript {
    background-image: url(../images/techno/typescript_hover.png) !important;
    background-position: center;
    background-size: 100% 100%
}

.tech_wordpress:hover {
    background-image: url(../images/techno/wordpress.png) !important;
    animation-name: floating;
    animation-duration: .7s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    transition: 1s
}

.tech_wordpress {
    background-image: url(../images/techno/wordpress_hover.png) !important;
    background-position: center;
    background-size: 100% 100%
}

.tech_saas:hover {
    background-image: url(../images/techno/saas.png) !important;
    animation-name: floating;
    animation-duration: .7s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    transition: 1s
}

.tech_saas {
    background-image: url(../images/techno/saas_hover.png) !important;
    background-position: center;
    background-size: 100% 100%
}

.tech_phonegap:hover {
    background-image: url(../images/techno/phonegap.png) !important;
    animation-name: floating;
    animation-duration: .7s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    transition: 1s
}

.tech_phonegap {
    background-image: url(../images/techno/phonegap_hover.png) !important;
    background-position: center;
    background-size: 100% 100%
}

.tech_cordova:hover {
    background-image: url(../images/techno/cordova.png) !important;
    animation-name: floating;
    animation-duration: .7s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    transition: 1s
}

.tech_cordova {
    background-image: url(../images/techno/cordova_hover.png) !important;
    background-position: center;
    background-size: 100% 100%
}

.tech_mysql:hover {
    background-image: url(../images/techno/mysql.png) !important;
    animation-name: floating;
    animation-duration: .7s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    transition: 1s
}

.tech_mysql {
    background-image: url(../images/techno/mysql_hover.png) !important;
    background-position: center;
    background-size: 100% 100%
}

.tech_sencha:hover {
    background-image: url(../images/techno/sencha.png) !important;
    animation-name: floating;
    animation-duration: .7s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    transition: 1s
}

.tech_sencha {
    background-image: url(../images/techno/sencha_hover.png) !important;
    background-position: center;
    background-size: 100% 100%
}

.tech_extension:hover {
    background-image: url(../images/techno/extension.png) !important;
    animation-name: floating;
    animation-duration: .7s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    transition: 1s
}

.tech_extension {
    background-image: url(../images/techno/extension_hover.png) !important;
    background-position: center;
    background-size: 100% 100%
}

.tech_ajex:hover {
    background-image: url(../images/techno/ajex.png) !important;
    animation-name: floating;
    animation-duration: .7s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    transition: 1s
}

.tech_ajex {
    background-image: url(../images/techno/ajex_hover.png) !important;
    background-position: center;
    background-size: 100% 100%
}

.tech_python:hover {
    background-image: url(../images/techno/python.png) !important;
    animation-name: floating;
    animation-duration: .7s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    transition: 1s
}

.tech_python {
    background-image: url(../images/techno/python_hover.png) !important;
    background-position: center;
    background-size: 100% 100%
}

.tech_angular:hover {
    background-image: url(../images/techno/angular1.png) !important;
    animation-name: floating;
    animation-duration: .7s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    transition: 1s
}

.tech_angular {
    background-image: url(../images/techno/angular_hover.png) !important;
    background-position: center;
    background-size: 100% 100%
}

.tech_php:hover {
    background-image: url(../images/techno/php1.png) !important;
    transform: rotate(0)
}

.tech_php {
    background-image: url(../images/techno/php_hover.png) !important;
    transform: rotate(8deg);
    transition: .5s;
    background-position: center;
    background-size: 100% 100%
}

.tech_node:hover {
    background-image: url(../images/techno/node1.png) !important
}

.tech_node {
    background-image: url(../images/techno/node_hover.png) !important;
    background-position: center;
    background-size: 100% 100%
}

.tech_laravel:hover {
    background-image: url(../images/techno/laravel.png) !important;
    transform: rotate(-8deg);
    transition: .5s
}

.tech_laravel {
    background-image: url(../images/techno/laravel_hover.png) !important;
    background-position: center;
    background-size: 100% 100%
}

.tech_codeigniter:hover {
    background-image: url(../images/techno/codeigniter1.png) !important;
    animation-name: floating;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out
}

.tech_codeigniter {
    background-image: url(../images/techno/codeigniter_hover.png) !important;
    background-position: center;
    background-size: 100% 100%
}

.tech_react:hover {
    background-image: url(../images/techno/react1.png) !important;
    transform: rotate(10deg);
    transition: .5s
}

.tech_react {
    background-image: url(../images/techno/react_hover.png) !important;
    background-position: center;
    background-size: 100% 100%
}

.tech_html:hover {
    background-image: url(../images/techno/html1.png) !important;
    transform: rotate(0);
    transition: .5s
}

.tech_html {
    background-image: url(../images/techno/html_hover.png) !important;
    background-position: center;
    background-size: 100% 100%;
    transform: rotate(15deg);
    padding-left: 30px
}

.tech_javascript:hover {
    background-image: url(../images/techno/javascript1.png) !important;
    animation-name: floating;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out
}

.tech_javascript {
    background-image: url(../images/techno/javascript_hover.png) !important;
    background-position: center;
    background-size: 100% 100%
}

.tech_jquery:hover {
    background-image: url(../images/techno/jquery1.png) !important
}

.tech_jquery {
    background-image: url(../images/techno/jquery_hover.png) !important;
    background-position: center;
    background-size: 100% 100%
}

.tech_bootstrap:hover {
    background-image: url(../images/techno/bootstrap1.png) !important;
    animation-name: floating;
    animation-duration: .5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out
}

.tech_bootstrap {
    background-image: url(../images/techno/bootstrap_hover.png) !important;
    background-position: center;
    background-size: 100% 100%
}

.tech_opacity {
    background-image: url(../images/techno/bootstrap_hover.png) !important;
    background-position: center;
    background-size: 100% 100%;
    opacity: 0
}

.technology .techImages .tech>img {
    max-width: 75px
}

.skill_default {
    display: inline-block
}

#changetext {
    transition: all 1s ease
}

.blue {
    color: #fff !important;
    position: relative;
    -webkit-animation-name: example;
    -webkit-animation-duration: 1s;
    animation-name: example;
    animation-duration: .3s
}

@keyframes example {
    from {
        left: -500px
    }
    to {
        left: 0
    }
}

.tech_bootstrap:hover .skill_default {
    display: none !important
}

.techImages.forImageAbout {
    display: none
}

#thin_menu {
    display: none;
    background-color: rgba(17, 20, 23, .85);
    border-bottom: 2px solid #1383d2ab
}

.dropdown ul li {
    padding-left: 25px !important
}

.services_slide img {
    width: 100% !important;
    height: 100%
}

.topnav {
    z-index: 999999;
    float: right;
    padding-top: 17px;
    padding-right: 10px
}

.topnav ul {
    display: flex;
    margin: 0;
    padding-right: 60px;
    text-shadow: 0 0 25px #131313
}

.topnav ul li {
    margin-left: 55px
}

.topnav ul li ul li {
    padding-left: 10px;
    margin-left: 0
}

.topnav a {
    font-family: Lato;
    float: left;
    display: block;
    text-align: center;
    color: #fff;
    letter-spacing: 2px;
    font-size: 14px;
    position: relative
}

.active {
    color: #fff
}

.topnav a:hover {
    color: #fff;
    border-bottom: 2px solid #e62020
}

.topnav .icon {
    display: none
}

.topnav_thin {
    z-index: 999999;
    float: right;
    padding-top: 17px;
    transition: 1s;
    padding-right: 10px
}

.topnav_thin ul {
    display: flex;
    margin: 0;
    padding-right: 60px
}

.topnav_thin ul li {
    margin-left: 55px
}

.topnav_thin ul li ul li {
    margin-left: 0
}

.topnav_thin a {
    font-family: Lato;
    float: left;
    display: block;
    text-align: center;
    color: #fff;
    letter-spacing: 2px;
    font-size: 14px;
    position: relative
}

.topnav_thin a:hover {
    color: #fff;
    border-bottom: 2px solid #e62020
}

.topnav_thin a.active {
    color: #fff;
    border-bottom: 3px solid #e62020
}

.topnav_thin .icon {
    display: none
}

.btn_slider {
    cursor: pointer;
    background-color: transparent;
    padding-right: 10px
}

#prevButton {
    cursor: pointer;
    border: transparent;
    background-color: transparent
}

#nextButton {
    cursor: pointer;
    border: transparent;
    background-color: transparent;
    padding-left: 5px
}

#prevButton:focus {
    background-color: transparent
}

#prevButton:visited {
    background-color: transparent
}

#prevButton:active {
    background-color: transparent
}

.btn_slider:hover {
    cursor: pointer;
    background-color: transparent;
    border: 1px solid #fff;
    padding-right: 10px
}

.btn_slider:focus {
    cursor: pointer;
    background-color: transparent;
    border: 1px solid transparent !important;
    padding-right: 10px
}

.btn_slider:active {
    cursor: pointer;
    background-color: transparent;
    border: 1px solid transparent !important;
    padding-right: 10px
}

main {
    display: flex;
    position: relative;
    flex-direction: column;
    width: 100vw;
    height: 100vh
}

.services_controls {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    min-height: 70px;
    position: absolute;
    bottom: 8%;
    left: 5%
}

.services_link {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    min-height: 70px;
    position: absolute;
    bottom: 30%;
    left: 7%
}

.services_link a {
    color: #fff;
    font-size: 22px;
    font-weight: 300;
    font-family: lato
}

.services_link a:hover {
    color: #fff;
    font-size: 22px;
    font-weight: 300;
    font-family: lato;
    text-decoration: underline !important
}

.services_slides_container {
    position: relative;
    overflow: hidden;
    display: flex;
    flex: 1
}

.services_slide {
    position: absolute;
    font-size: 90px;
    font-weight: 700;
    color: rgba(255, 255, 255, .9);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: calc(100% /2);
    width: 100%;
    background-size: cover
}

.slides-inner {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden
}

@media screen and (max-width:600px) {
    .topnav a {
        display: none
    }
    .topnav a.icon {
        float: right;
        display: block
    }
}

@media screen and (max-width:600px) {
    .topnav.responsive {
        position: relative
    }
    .topnav ul {
        display: table-cell
    }
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left
    }
}

.slide {
    position: absolute;
    z-index: 1;
    background-size: cover;
    background-position: center center;
    width: 90%;
    height: 450px
}

.slide blockquote {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    margin: 0;
    border: 10px
}

.slide blockquote p {
    font-family: Baskerville;
    color: #fff;
    padding: 0;
    font-size: 45px;
    font-style: italic;
    text-align: center;
    max-width: 50%;
    margin-left: auto;
    margin-right: auto
}

.slide cite {
    font-family: ProximaNova, Helvetica Neue;
    font-weight: 700;
    letter-spacing: 3px;
    font-style: normal;
    font-size: 13px;
    text-align: center;
    color: #b5b5b5;
    display: block;
    text-transform: uppercase
}

.slide .play-button {
    width: 70px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    cursor: pointer;
    display: block
}

.slide.video-active .close-button {
    background-image: url(../images/testimonials/close_close.png);
    background-size: 57px auto;
    background-repeat: no-repeat;
    height: 38px;
    width: 36px;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    cursor: pointer;
    background-color: transparent;
    border: none
}

.quote-1 {
    background-image: url(../images/testimonials/1.jpg);
    background-position: top right
}

.quote-2 {
    background-image: url(../images/testimonials/2.jpg);
    background-position: top left
}

.quote-3 {
    background-image: url(../images/testimonials/3.jpg);
    background-position: top left
}

.quote-4 {
    background-image: url(../images/testimonials/4.jpg);
    background-position: top center
}

.quote-5 {
    background-image: url(../images/testimonials/5.jpg);
    background-position: top left
}

.slide.active {
    z-index: 5
}

.slide.video-active .quote-video {
    visibility: visible !important;
    position: absolute;
    top: 0;
    height: 600px !important
}

.avatars {
    margin-top: 0;
    text-align: center;
    padding-left: 0;
    z-index: 999999999;
    position: relative;
    top: 465px
}

.avatars li {
    transform: matrix(1, 0, 0, 1, 0, 0);
    height: 80px;
    width: 80px;
    transition: transform .2s ease-in-out;
    display: inline-block;
    text-align: center;
    margin: auto 10px
}

.avatars li a {
    cursor: pointer
}

.avatars li#avatar-1 {
    transition: transform .4s ease
}

.avatars li#avatar-2 {
    transition: transform .5s ease
}

.avatars li#avatar-3 {
    transition: transform .6s ease
}

.avatars li#avatar-4 {
    transition: transform .7s ease
}

.avatars li#avatar-5 {
    transition: transform .7s ease
}

.avatars li.video-active#avatar-1 {
    transform: matrix(.75, 0, 0, .75, 30, 10)
}

.avatars li.video-active#avatar-2 {
    transform: matrix(.75, 0, 0, .75, 10, 10)
}

.avatars li.video-active#avatar-3 {
    transform: matrix(.75, 0, 0, .75, -10, 10)
}

.avatars li.video-active#avatar-4 {
    transform: matrix(.75, 0, 0, .75, -30, 10)
}

.avatars li.video-active#avatar-5 {
    transform: matrix(.75, 0, 0, .75, -50, 10)
}

.avatars li span {
    background-image: url(../images/testimonials/avatar-sprites.png);
    height: 80px;
    width: 80px;
    display: inline-block;
    background-size: 80px auto;
    border-radius: 200px;
    border: 2px solid #fff
}

.avatars #avatar-2 span {
    background-position: 0 -80px
}

.avatars #avatar-3 span {
    background-position: 0 -159px
}

.avatars #avatar-4 span {
    background-position: 0 -240px
}

.avatars #avatar-5 span {
    background-position: 0 -320px
}

.avatars li .logo {
    background-image: url(../images/testimonials/avatar-sprites.png);
    height: 38px;
    background-size: 80px auto;
    display: none
}

.avatars #avatar-1 .logo {
    background-position: 25px -239px;
    margin-top: 3px;
    display: none
}

.avatars #avatar-2 .logo {
    background-position: 23px -276px;
    margin-top: 1px;
    display: none
}

.avatars #avatar-3 .logo {
    background-position: 10px -313px;
    margin-top: 10px;
    display: none
}

@media screen and (max-width:375px) and (device-height :812px) and (-webkit-device-pixel-ratio :3) {
    .portfolio_title {
        margin-top: 75px
    }
    .owl-item img {
        height: 500px
    }
    #project-term {
        margin-bottom: 40px;
        padding-top: 20px;
        text-align: center
    }
    .carousel_text {
        font-size: 20px
    }
    .we_are_hero {
        font-size: 24px;
        font-family: lato;
        font-weight: 800;
        text-transform: uppercase;
        line-height: 40px;
        top: 23%;
        left: 7%
    }
    .banner_hero_main {
        height: 100vh;
        background-color: #2a2e31
    }
    #hero_myVideo {
        margin-top: 70%
    }
    .hero_service_main {
        position: relative;
        bottom: 0
    }
    .hero_service {
        margin-bottom: 20px;
        margin-top: 20px;
        background-color: #eeb013;
        margin-left: 30px;
        margin-right: 30px;
        padding: 10px;
        border-radius: 28px
    }
    .hero_service1 {
        margin-bottom: 20px;
        background-color: #eeb013;
        margin-left: 30px;
        margin-right: 30px;
        padding: 10px;
        border-radius: 28px
    }
    .hero_service a,
    .hero_service1 a {
        font-family: open sans;
        font-size: 24px;
        font-weight: 600;
        color: #212121;
        text-shadow: none
    }
    .iphone-x {
        display: none
    }
    .portfolio_title {
        font-size: 52px;
        color: #2a2e31;
        float: left;
        font-weight: 800;
        font-family: open sans;
        line-height: 50px
    }
    .slide blockquote p {
        font-family: Baskerville;
        color: #fff;
        padding: 0;
        font-size: 30px;
        font-style: italic;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%
    }
    .slide {
        top: 60px
    }
    .sld375 {
        display: block
    }
    .services_link {
        display: none
    }
    .blue_copyright p {
        padding-bottom: 0;
        font-size: 16px;
        float: left
    }
}

@media screen and (max-width:600px) and (max-device-height:667px) {
    .portfolio_title {
        margin-top: 50px
    }
    .owl-item img {
        height: 465px
    }
    #project-term {
        margin-bottom: 0;
        padding-top: 20px;
        text-align: center
    }
    .carousel_text {
        font-size: 20px
    }
    .we_are_hero {
        font-size: 24px;
        font-family: lato;
        font-weight: 800;
        text-transform: uppercase;
        line-height: 40px;
        top: 24%;
        left: 0
    }
    .we_are_hero_small {
        font-size: 36px
    }
    .banner_hero_main {
        height: 100vh;
        background-color: #2a2e31
    }
    #hero_myVideo {
        margin-top: 55%
    }
    .hero_service_main {
        position: relative;
        bottom: 0
    }
    .hero_service {
        margin-bottom: 10px;
        margin-top: 10px;
        background-color: #eeb013;
        margin-left: 30px;
        margin-right: 30px;
        padding: 5px;
        border-radius: 28px
    }
    .hero_service1 {
        margin-bottom: 20px;
        background-color: #eeb013;
        margin-left: 30px;
        margin-right: 30px;
        padding: 10px;
        border-radius: 28px
    }
    .hero_service a,
    .hero_service1 a {
        font-family: open sans;
        font-size: 22px;
        font-weight: 600;
        color: #212121;
        text-shadow: none
    }
    .iphone-x {
        display: none
    }
    .portfolio_title {
        font-size: 36px;
        color: #2a2e31;
        float: left;
        font-weight: 800;
        font-family: open sans;
        line-height: 44px
    }
    .l-left img {
        width: 100%
    }
    .slide {
        height: 470px
    }
    .avatars {
        top: 490px
    }
    .slide blockquote p {
        font-family: Baskerville;
        color: #fff;
        padding: 0;
        font-size: 26px;
        font-style: italic;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%
    }
    .container-fluid.footerArea1 {
        padding-top: 20%;
        height: 100vh
    }
    .slide {
        top: 60px
    }
    .sld375 {
        display: block
    }
    .services_link {
        display: none
    }
    .blue_copyright p {
        padding-bottom: 0;
        font-size: 16px;
        float: left;
        margin-bottom: 0;
        margin: 0 auto;
        width: 78%
    }
    .ending_footer {
        min-height: 293px;
        background-position: 0 40px
    }
    .pad_bot_70 {
        padding-bottom: 17px
    }
    .container.ourwork {
        margin-top: 30px
    }
}

@media screen and (min-width:1366px) and (max-width:1600px) {
    .ourwork {
        padding-top: 100px
    }
    .our_skills {
        padding-top: 100px
    }
}

header {
    will-change: height;
    position: fixed;
    height: 72px;
    top: 0;
    left: 0;
    z-index: 999999;
    width: 100%;
    transition: all .3s ease;
    background-color: rgba(17, 20, 23, .85)
}

header.shrunk {
    height: 55px;
    background-color: rgba(17, 20, 23, .85);
}

@media screen and (max-width:678px) {
    .animation-element.slide-left.testimonial,
    .animation-element.slide-left.testimonial:nth-of-type(even),
    .animation-element.slide-left.testimonial:nth-of-type(odd) {
        width: 100%;
        margin: 0 0 20px 0
    }
    .animation-element.slide-left.testimonial .content,
    .animation-element.slide-left.testimonial .left,
    .animation-element.slide-left.testimonial .rating,
    .animation-element.slide-left.testimonial .right {
        text-align: center;
        float: none
    }
    .animation-element.slide-left.testimonial img {
        width: 85px;
        height: 85px;
        margin-bottom: 5px
    }
}

@media only screen and (min-width:1367px) and (max-width:1920px) {
    .testimonial_right {
        padding: 10% 5% 0 4%
    }
    .testimonial_text {
        padding-right: 0;
        padding-top: 14px
    }
    #testimonials_carousel {
        padding-bottom: 22px;
        padding-top: 76px !important
    }
    .ourwork {
        padding-top: 100px
    }
}

@media only screen and (min-width:1200px) and (max-width:1366px) {
    .testimonial_right {
        padding: 10% 5% 0 4%
    }
    .testimonial_text {
        padding-right: 140px;
        padding-top: 14px
    }
    .leftside img {
        width: 100%;
        height: auto
    }
    #testimonials_carousel {
        padding-bottom: 22px;
        padding-top: 76px !important
    }
    .ourwork {
        padding-top: 100px
    }
    .our_skills {
        padding-top: 100px
    }
}

@media only screen and (min-width:1025px) and (max-width:1199px) {
    .testimonial_right {
        padding: 69px 10px 0 50px
    }
    .testimonial_text {
        padding-right: 0;
        padding-top: 14px
    }
    .leftside img {
        width: 100%;
        height: auto
    }
    .container.ourwork {
        width: 100%
    }
    .ending_title {
        font-size: 130px
    }
    .ending_title3 {
        font-size: 130px
    }
}

@media only screen and (min-width:992px) and (max-width:1024px) {
    .testimonial_right {
        padding: 28px 10px 0 50px
    }
    .testimonial_text {
        padding-right: 0;
        padding-top: 14px
    }
    .leftside img {
        width: 100%;
        height: auto
    }
    .container.ourwork {
        width: 100%
    }
    .ending_title {
        font-size: 90px
    }
    .ending_title3 {
        font-size: 90px
    }
    .we_are_hero {
        font-size: 70px
    }
    .hero_service_main {
        padding: 0 70px
    }
    .ending_subtitle {
        font-size: 36px
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    #hero_myVideo {
        height: auto !important
    }
    .banner_hero_main {
        height: auto !important
    }
    header {
        margin-top: 15px
    }
    .we_are_hero {
        font-size: 60px
    }
    .hero_service_main {
        padding: 0 52px
    }
    .hero_service a,
    .hero_service1 a {
        font-size: 15px
    }
    .carousel_main {
        padding-left: 50px
    }
    .portfolio_title {
        font-size: 36px;
        float: left;
        width: 100% !important;
        margin: 0;
        padding: 0
    }
    #project-terms {
        width: 75%;
        float: left;
        text-align: left;
        padding-top: 13px;
        margin-bottom: 30px
    }
    .carousel_text {
        font-size: 15px;
        padding: 4px 8px
    }
    .testimonial_right {
        padding: 20px 10px 0 38px
    }
    .testimonial_text {
        padding-right: 0;
        padding-top: 8px;
        font-size: 14px
    }
    .leftside img {
        width: 100%;
        height: auto
    }
    .container.ourwork {
        width: 100%
    }
    .ending_title {
        font-size: 50px
    }
    .ending_title3 {
        font-size: 50px
    }
    .ending_subtitle {
        font-size: 24px
    }
    .white_box_over {
        left: 0;
        top: 130px;
        width: 151px;
        height: 400px
    }
    .carousel_main {
        background-image: none !important;
        padding-bottom: 0 !important
    }
    .video_image {
        padding-bottom: 30px
    }
    .title {
        padding-top: 0
    }
    .services_title {
        font-size: 34px
    }
    .testimonial_right h4 {
        font-size: 20px;
        padding-top: 0 !important;
        margin-top: 0 !important
    }
}

@media only screen and (min-width:481px) and (max-width:767px) {
    .glyphicon-chevron-right:before {
        left: -35px !important
    }
    .white_box_over {
        display: none
    }
    .carousel_main {
        padding-left: 10px;
        padding-right: 10px
    }
    .portfolio_title {
        font-size: 36px;
        float: left;
        width: 100% !important;
        text-align: center;
        margin-top: -10px
    }
    #project-terms {
        width: 100%;
        float: left;
        text-align: center;
        padding-top: 0;
        margin-bottom: 25px
    }
    .carousel_text {
        font-size: 15px;
        padding: 4px 8px
    }
    .row.video_image img {
        width: 100%
    }
    .testimonial_right {
        margin-left: 0 !important;
        padding: 19px 36px 0 36px
    }
    span.testimonial_logo img {
        width: 25%
    }
    .testimonial_text {
        padding-right: 0;
        padding-top: 8px;
        font-size: 14px
    }
    .leftside img {
        width: 100%;
        height: auto
    }
    .container.ourwork {
        width: 100%
    }
    .ending_title {
        font-size: 36px
    }
    .ending_title3 {
        font-size: 36px
    }
    .ending_subtitle {
        font-size: 18px
    }
    .carousel_main {
        background-image: none !important;
        padding-bottom: 0 !important
    }
    .video_image {
        padding-bottom: 22px;
        padding-top: 25px
    }
    .title {
        padding-top: 0
    }
    .services_title {
        font-size: 36px
    }
    .testimonial_right h4 {
        font-size: 20px;
        padding-top: 0 !important;
        margin-top: 0 !important
    }
    .ending {
        padding-bottom: 0
    }
    #testimonials_carousel {
        padding-bottom: 22px
    }
}

@media only screen and (min-width:376px) and (max-width:480px) {
    .owl-item img {
        height: 300px
    }
    .glyphicon-chevron-right:before {
        left: -35px !important
    }
    .white_box_over {
        display: none
    }
    .carousel_main {
        padding-left: 10px;
        padding-right: 10px
    }
    .portfolio_title {
        font-size: 32px;
        float: left;
        width: 100% !important;
        text-align: center;
        margin-top: -10px
    }
    #project-terms {
        width: 100%;
        float: left;
        text-align: center;
        padding-top: 0;
        margin-bottom: 25px
    }
    .carousel_text {
        font-size: 14px;
        padding: 4px 8px
    }
    .row.video_image img {
        width: 100%
    }
    .testimonial_right {
        margin-left: 0 !important;
        padding: 19px 36px 0 36px
    }
    span.testimonial_logo img {
        width: 25%
    }
    .testimonial_text {
        padding-right: 0;
        padding-top: 8px;
        font-size: 14px
    }
    .leftside img {
        width: 100%;
        height: auto
    }
    .container.ourwork {
        width: 100%
    }
    .ending_title {
        font-size: 32px
    }
    .ending_title3 {
        font-size: 32px
    }
    .ending_subtitle {
        font-size: 18px
    }
    .carousel_main {
        background-image: none !important;
        padding-bottom: 0 !important;
        height: 300px
    }
    .video_image {
        padding-bottom: 22px;
        padding-top: 25px;
        height: auto
    }
    .title {
        padding-top: 0
    }
    .services_title {
        font-size: 32px
    }
    .testimonial_right h4 {
        font-size: 20px;
        padding-top: 0 !important;
        margin-top: 0 !important
    }
    .ending {
        padding-bottom: 0
    }
    #testimonials_carousel {
        padding-bottom: 22px
    }
}

@media only screen and (min-width:0px) and (max-width:375px) {
    .glyphicon-chevron-right:before {
        left: -35px !important
    }
    .white_box_over {
        display: none
    }
    .carousel_main {
        padding-left: 10px;
        padding-right: 10px
    }
    .portfolio_title {
        font-size: 28px;
        float: left;
        width: 100% !important;
        text-align: center;
        margin-top: -10px
    }
    #project-terms {
        width: 100%;
        float: left;
        text-align: center;
        padding-top: 0;
        margin-bottom: 25px
    }
    .carousel_text {
        font-size: 12px;
        padding: 4px 4px
    }
    .row.video_image img {
        width: 100%
    }
    .testimonial_right {
        margin-left: 0 !important;
        padding: 19px 36px 0 36px
    }
    span.testimonial_logo img {
        width: 25%
    }
    .testimonial_text {
        padding-right: 0;
        padding-top: 8px;
        font-size: 14px
    }
    .leftside img {
        width: 100%;
        height: auto
    }
    .container.ourwork {
        width: 100%
    }
    .ending_title {
        font-size: 28px
    }
    .ending_title3 {
        font-size: 28px
    }
    .ending_subtitle {
        font-size: 16px;
        padding: 0 5px
    }
    .carousel_main {
        background-image: none !important;
        padding-bottom: 0 !important;
        height: 300px
    }
    .owl-item img {
        height: 300px
    }
    .video_image {
        padding-bottom: 22px;
        padding-top: 25px;
        height: auto
    }
    .title {
        padding-top: 0
    }
    .services_title {
        font-size: 28px
    }
    .testimonial_right h4 {
        font-size: 20px;
        padding-top: 0 !important;
        margin-top: 0 !important
    }
    .ending {
        padding-bottom: 0
    }
    #testimonials_carousel {
        padding-bottom: 22px
    }
    .slidersection .demo-wrapper {
        padding: 0
    }
}

@media only screen and (min-device-width :375px) and (max-device-width :667px) {
    .l-left {
        padding-left: 0
    }
    .l-left img {
        width: 70%
    }
    .topnav {
        line-height: 30px !important
    }
    .fa-bars:before,
    .fa-navicon:before,
    .fa-reorder:before {
        font-size: 24px
    }
}

a:focus {
    outline: 0
}

.portfolioFilter {
    padding: 15px 0
}

.portfolioFilter a {
    font-size: 16px;
    color: #666;
    text-decoration: none;
    padding: 4px 15px;
    display: inline-block;
    font-family: lato;
    font-weight: 500
}

.portfolioFilter a.current {
    color: #df422b
}

.portfolioContainer {
    border: 1px solid #eee;
    border-radius: 3px
}

.port_img {
    overflow: hidden;
    width: 100%;
    background-color: #000
}

.port_img img {
    margin: 0;
    width: 100%;
    transition: 2s
}

.port_img img:hover {
    transform: scale(1.2);
    cursor: pointer;
    opacity: .1
}

.isotope-item {
    z-index: 2
}

.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1
}

.isotope,
.isotope .isotope-item {
    -webkit-transition-duration: .8s;
    -moz-transition-duration: .8s;
    transition-duration: .8s
}

.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width
}

.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity
}

.portfolio_title_main {
    padding-bottom: 20px
}

.portfolio_title {
    font-size: 44px;
    color: #6d6d6d;
    float: left;
    font-weight: 800;
    font-family: open sans
}

.portfolio_box {
    margin: 80px 0
}

.orange {
    color: #d82010
}

.our_work_ending_title {
    font-size: 18px;
    color: #fff;
    font-family: lato;
    font-weight: 500;
    padding-bottom: 50px
}

.our_work_ending_subtitle {
    font-size: 100px;
    color: #fff;
    font-family: lato;
    font-weight: 500
}

.our_work_ending_subtitle:hover {
    text-decoration: underline !important
}

.our_work_ending {
    background-color: #01083b;
    padding: 100px 0
}

.our_work_title {
    font-family: "Playfair Display", serif;
    font-size: 85px;
    font-weight: 600;
    color: #fff;
    background-size: 200%;
    background-image: none;
    background-image: linear-gradient(45deg, #fff070 0, #fff070 35%, #00c9d3 66%, #00c9d3 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    animation: glow 9s linear infinite
}

@keyframes glow {
    0% {
        background-position: 0 43%
    }
    50% {
        background-position: 100% 58%
    }
    100% {
        background-position: 0 43%
    }
}

.our_work_para {
    font-family: lato;
    font-size: 14px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff
}

.banner_our_work {
    position: relative;
    min-height: 650px;
    background-color: #000;
    padding: 180px 0 80px;
    background-image: linear-gradient(to top, #030729 20%, #01083b 80%)
}

.banner_our_work_main {
    position: relative
}

@keyframes move_wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1)
    }
    50% {
        transform: translateX(-25%) translateZ(0) scaleY(.55)
    }
    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1)
    }
}

.waveWrapper {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto
}

.waveWrapperInner {
    position: absolute;
    width: 100%;
    overflow: hidden;
    height: 100%;
    bottom: -1px
}

.bgTop {
    z-index: 15;
    opacity: .5
}

.bgMiddle {
    z-index: 10;
    opacity: .75
}

.bgBottom {
    z-index: 5
}

.wave {
    position: absolute;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat no-repeat;
    background-position: 0 bottom;
    transform-origin: center bottom
}

.waveTop {
    background-size: 50% 100px
}

.waveAnimation .waveTop {
    animation: move-wave 3s;
    -webkit-animation: move-wave 3s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

.waveMiddle {
    background-size: 50% 120px
}

.waveAnimation .waveMiddle {
    animation: move_wave 10s linear infinite
}

.waveBottom {
    background-size: 50% 100px
}

.waveAnimation .waveBottom {
    animation: move_wave 15s linear infinite
}

.banner_contact_main {
    min-height: 650px;
    background-color: #fff
}

.banner_contact {
    padding-top: 220px;
    color: #fff;
    position: inherit;
    z-index: 1
}

.contact_title {
    font-family: lato;
    font-size: 55px;
    color: #fff;
    font-weight: 300
}

.contact_title_1 {
    font-family: lato;
    font-size: 24px;
    color: #fff;
    font-weight: 700;
    letter-spacing: 2px
}

.contact_subtitle {
    font-family: libre-baskerville;
    font-size: 60px;
    color: #fff;
    font-style: italic;
    font-weight: 700
}

.contact_subtitle:hover {
    font -family: libre-baskerville;
    font-size: 60px;
    color: #f7c115;
    font-style: italic;
    font-weight: 700;
    text-decoration: underline
}

.contact_details_main {
    background-color: #1d1d1d;
    min-height: 100px;
    transform-origin: left top;
    transform: skewy(-2deg)
}

.contact_details {
    background-color: #1d1d1d;
    padding: 50px 100px 100px;
    margin-top: -50px
}

.contact_sec2_title {
    color: #fff;
    font-size: 45px;
    font-family: clear sans;
    font-weight: 300
}

.contact_dark_grey {
    color: #fff;
    font-size: 18px;
    font-family: clear sans;
    font-weight: 400
}

.contact_light_grey {
    color: #d6d6d6;
    font-size: 18px;
    font-family: clear sans;
    font-weight: 300;
    line-height: 32px
}

.telephone h2 {
    margin-top: 0;
    padding-bottom: 30px
}

.contact_btn {
    color: #fff;
    background-color: #1d1d1d;
    padding: 11px 20px;
    border: 1px solid #343434;
    margin-top: 20px
}

.contact_map {
    margin-top: 80px;
    padding: 0 50px
}

.contact_ending {
    color: #fff;
    padding-top: 50px;
    padding-bottom: 80px;
    background-color: #111
}

.contact_ending_title {
    color: #fff;
    font-size: 150px;
    font-weight: 600
}

.contact_ending_subtitle {
    color: #b6b6b6;
    font-size: 40px;
    font-weight: 300
}

#hero_myVideo {
    background-color: #000;
    opacity: 1;
    object-fit: fill;
    height: 100vh;
    width: 100%
}

.hero_service {
    border-right: #fff solid 1px;
    text-align: center
}

.hero_service_main {
    position: absolute;
    bottom: 25px;
    padding: 0 150px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    z-index: 99
}

.hero_service1 {
    text-align: center
}

.hero_service a,
.hero_service1 a {
    font-family: lato light;
    font-size: 16px;
    color: #fff;
    text-shadow: 0 0 20px #000;
    letter-spacing: 1.1px
}

.hero_service a:hover,
.hero_service1 a:hover {
    color: #fdc100
}

.hero_service a:focus,
.hero_service1 a:focus {
    color: #fdc100
}

.banner_hero_main {
    width: 100%;
    float: left;
    background-color: #000;
    height: 100vh
}

.hero_video {
    width: 100%;
    float: left;
    position: relative
}

.we_are_hero {
    font-family: OpenSans-Bold;
    letter-spacing: 3px;
    font-size: 80px;
    color: #fff !important;
    font-weight: bolder;
    line-height: 60 px !important;
    position: absolute;
    top: 25%;
    left: 5%;
    width: 30%;
    margin: 0 auto;
    text-shadow: 0 0 25px #131313;
    text-align: left
}

.uuu {
    color: #968e4e;
    position: absolute;
    top: 8px;
    z-index: 999999;
    font-size: 26px;
    font-weight: 600;
    left: 16px;
    font-family: initial
}

.we_are_hero_small {
    font-size: 70px
}

#project-terms {
    margin-bottom: 40px;
    padding-top: 20px;
    text-align: right
}

#project-term {
    margin-bottom: 40px;
    padding-top: 20px;
    text-align: right
}

div#project-terms a:active,
div#project-terms a:focus,
div#project-terms a:hover {
    color: #f7c115 !important
}

.carousel_main {
    background-repeat: no-repeat;
    background-position: 0 130px;
    position: relative;
    padding-bottom: 50px;
    padding-left: 150px;
    height: 100vh
}

.carousel_text {
    margin-right: 5%;
    font-size: 18px;
    color: #6d6d6d;
    text-decoration: none;
    padding: 4px 15px;
    display: inline-block;
    font-weight: 700;
    font-family: Montserrat, sans-serif;
    letter-spacing: .5px
}

.video_image {
    padding: 0
}

.white_box_over {
    background-image: url(../images/ucohome/video_image_back.png);
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 135px;
    width: 150px;
    height: 470px;
    z-index: 9;
    overflow: hidden;
    background-color: #fff
}

.ending_title {
    position: relative
}

.ending_title3 {
    color: #e5422b;
    font-size: 120px;
    font-weight: 600;
    position: relative;
    display: inline-block;
    transition: all 2s ease-in-out
}

.ending_title3:hover {
    cursor: pointer
}

#dd1,
#dd2,
#dd3,
#dd4,
#dd6,
#dd7,
#dd8 {
    width: 15px;
    height: 15px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    position: absolute;
    top: 26px;
    left: -34px;
    background-color: #e5422b;
    transition: all 1s ease-in-out;
    transform: translate3d(0, 0, 0)
}

#dd5 {
    width: 28px;
    height: 28px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 50%;
    position: absolute;
    top: 22px;
    left: -36px;
    background-color: #e5422b;
    transition: all 1s ease-in-out;
    transform: translate3d(0, 0, 0);
    transition-delay: .5s;
    z-index: 9
}

.ending_title3:hover #dd1 {
    transform: translate(-50px, -30px);
    background-color: transparent;
    transition-delay: .1s
}

.ending_title3:hover #dd2 {
    transform: translate(20px, -50px);
    background-color: transparent;
    transition-delay: .3s
}

.ending_title3:hover #dd3 {
    transform: translate(-145px, 90px);
    background-color: transparent;
    transition-delay: .5s
}

.ending_title3:hover #dd4 {
    transform: translate(190px, 10px);
    background-color: transparent;
    transition-delay: .7s
}

.ending_title3:hover #dd6 {
    transform: translate(-155px, 75px);
    background-color: transparent;
    transition-delay: .9s
}

.ending_title3:hover #dd7 {
    transform: translate(134px, -72px);
    background-color: transparent;
    transition-delay: 1.1s
}

.ending_title3:hover #dd8 {
    transform: translate(175px, 37px);
    background-color: transparent;
    transition-delay: 1.3s
}

.ending_title3:hover #dd8 {
    transform: translate(205px, -137px);
    background-color: transparent;
    transition-delay: 1.5s
}

.ending_title3:hover #dd8 {
    transform: translate(92px, -52px);
    background-color: transparent;
    transition-delay: 1.6s
}

.ending_title3:hover #dd8 {
    transform: translate(-62px, -66px);
    background-color: transparent;
    transition-delay: 1.7s
}

.ending_title3:hover #dd5 {
    transform: translate(0, 0);
    background-color: #151759
}

.banner_about {
    background-image: url(../images/ucohome/banner_about.jpg);
    background-repeat: no-repeat;
    min-height: 718px;
    background-color: #151759;
    transform: skewy(-4deg)
}

.banner_about_main {
    min-height: 718px;
    background-color: #151759;
    transform: skewy(4deg)
}

.floating {
    animation-name: floating;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    position: absolute;
    top: 150px;
    left: 110px;
    z-index: 998
}

@keyframes floating {
    from {
        transform: translate(0, 0)
    }
    65% {
        transform: translate(0, 15px)
    }
    to {
        transform: translate(0, 0)
    }
}

.video_about_main {
    background-image: url(../images/ucohome/video_about.jpg);
    min-height: 650px;
    background-color: grey;
    transform: skewy(2deg)
}

.we_are {
    padding: 150px;
    margin: 0 150px;
    font-size: 95px;
    color: #fff;
    font-weight: bolder;
    line-height: 110px
}

.white_space {
    min-height: 50px;
    background-color: #fff;
    transform: skewy(-2deg);
    position: relative;
    top: -28px
}

.white_space_main {
    min-height: 50px;
    background-color: #fff;
    position: relative;
    top: -28px
}

.team_title {
    text-transform: uppercase;
    font-size: 120px;
    padding-left: 80px;
    padding-right: 1000px;
    padding-bottom: 80px
}

.stats {
    min-height: 400px
}

.stats_grey {
    padding-top: 150px;
    padding-bottom: 150px;
    vertical-align: middle;
    background-color: #e5422b
}

.stats_blue {
    padding-top: 150px;
    padding-bottom: 150px;
    vertical-align: middle;
    background-color: #151759
}

.stats_white {
    padding-top: 150px;
    padding-bottom: 150px;
    vertical-align: middle;
    background-color: #fff
}

.stats_title {
    color: #e5422b;
    font-size: 110px;
    font-weight: 600
}

.stats_title_grey {
    color: #fff;
    font-size: 110px;
    font-weight: 600
}

.stats_title_blue {
    color: #fff;
    font-size: 110px;
    font-weight: 600
}

.stats_subtitle {
    color: #3e3e3e;
    font-size: 30px;
    font-weight: 600
}

.stats_subtitle_white {
    color: #fff;
    font-size: 30px;
    font-weight: 600
}

.pad-left-150 {
    padding-left: 150px
}

.pad-top-100 {
    padding-top: 100px
}

.journey {
    padding: 50px
}

.journey_title {
    font-size: 80px;
    color: #31313a
}

.journey_subtitle {
    font-size: 18px;
    font-weight: 600;
    color: #31313a;
    padding: 0 5px
}

.ending {
    color: #fff;
    padding-top: 90px;
    padding-bottom: 30px
}

.ending_footer {
    color: #fff;
    padding-top: 90px;
    padding-bottom: 30px;
    background-color: #2a2e31;
    background-image: url(../images/111_back.jpg);
    background-position: 0 66px;
    min-height: 315px
}

.ending_title {
    color: #6d6d6d;
    font-size: 120px;
    font-weight: 600
}

.ending_title2 {
    color: #e5422b;
    font-size: 120px;
    font-weight: 600
}

.ending_subtitle {
    color: #6d6d6d;
    font-size: 40px;
    font-weight: 600;
    transition: .2s
}

.ending_subtitle:hover {
    color: #f7c115;
    font-size: 40px;
    font-weight: 600;
    transition: 1s;
    text-decoration: underline
}

#world {
    background: linear-gradient(#8ee4ae, #e9eba3);
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.header-img__link {
    margin-right: 40px
}

.header__img-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: no-repeat 50%;
    background-size: cover
}

.video {
    position: relative
}

.video.is-paused .video__overlay,
.video:hover .video__overlay {
    opacity: 1
}

.video.is-paused .video__icon:after {
    content: ""
}

.video--small {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center
}

.video__overlay {
    opacity: 0;
    transition: opacity .3s
}

.video__controls {
    transform: translate(-50%, -50%)
}

.video__button,
.video__controls,
.video__time {
    position: absolute;
    top: 50%;
    left: 50%
}

.video__button {
    white-space: nowrap;
    display: -ms-inline-flexbox;
    display: inline-flex;
    transform: translate(-50%, -50%)
}

.video__button:hover .video__icon {
    transform: translateY(-2px)
}

.video__button:hover .video__icon:after {
    color: #a1b0bf
}

.video__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    position: relative;
    box-shadow: -16px 32px 32px rgba(0, 0, 0, .64);
    transition: transform .2s ease-in-out
}

.video__icon:after {
    content: "";
    color: #1a1c33;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    transition: color .2s ease-in-out
}

@media only screen and (min-width:1440px) {
    .video__icon:after {
        font-size: 16px
    }
}

@media only screen and (min-width:720px) {
    .video__icon {
        width: 56px;
        height: 56px
    }
}

@media only screen and (min-width:1440px) {
    .video__icon {
        width: 72px;
        height: 72px
    }
}

.video__time {
    font-size: 18px;
    line-height: 35px;
    font-family: Geomanist;
    color: hsla(0, 0%, 100%, .64);
    transform: translate(-50%, 24px)
}

@media screen and (min-width:1440px) {
    .video__time {
        font-size: 23px;
        line-height: 44px
    }
}

@media only screen and (min-width:720px) {
    .video__time {
        transform: translate(-50%, 32px)
    }
}

@media only screen and (min-width:1440px) {
    .video__time {
        transform: translate(-50%, 48px)
    }
}

.news-img {
    width: calc(100% - 24px)
}

@media only screen and (min-width:720px) {
    .news-img {
        width: calc(100% - 64px)
    }
}

@media only screen and (min-width:1024px) {
    .news-img--large {
        width: calc(58.33333% + -10px)
    }
}

@media only screen and (min-width:1440px) {
    .news-img--large {
        width: calc(58.33333% + -16.66667px)
    }
}

@media only screen and (min-width:1024px) {
    .news-img--small {
        width: calc(100% - 56px)
    }
}

@media only screen and (min-width:1440px) {
    .news-img--small {
        width: calc(100% - 72px)
    }
}

.news-img__link {
    display: block;
    width: 100%;
    padding-bottom: 66.7%;
    overflow: hidden;
    background: no-repeat top;
    background-size: cover
}

.news-card {
    display: block;
    padding: 24px
}

@media only screen and (min-width:720px) {
    .news-card {
        padding-left: 56px
    }
}

@media only screen and (min-width:1024px) {
    .news-card {
        padding: 32px 24px 24px 80px
    }
}

@media only screen and (min-width:1440px) {
    .news-card {
        padding: 40px 24px 24px 112px
    }
}

@media only screen and (min-width:1024px) {
    .news-card--large {
        width: calc(50% + -12px);
        margin-right: auto;
        padding: 32px 24px 32px 110px;
        box-shadow: 16px 16px 32px rgba(0, 0, 0, .64);
        position: absolute;
        left: calc(50% + -12px);
        bottom: 0
    }
}

@media only screen and (min-width:1440px) {
    .news-card--large {
        width: calc(50% + -20px);
        padding: 40px 24px 40px 166px;
        left: calc(50% + -20px)
    }
}

.news-card__author {
    font-size: 19px;
    line-height: 24px;
    font-family: Grifo;
    color: #a1b0bf;
    margin-bottom: 16px
}

.news-card__title {
    margin-bottom: 8px
}

.news-card__intro {
    font-size: 18px;
    line-height: 35px;
    font-family: Geomanist;
    opacity: .64;
    margin-bottom: 16px
}

@media screen and (min-width:1440px) {
    .news-card__intro {
        font-size: 23px;
        line-height: 44px
    }
}

.contact-person {
    position: relative;
    width: 100%;
    z-index: 2;
    margin-bottom: 32px
}

@media only screen and (min-width:720px) {
    .contact-person {
        margin-bottom: 64px;
        width: calc(75% + -6px)
    }
}

@media only screen and (min-width:1024px) {
    .contact-person {
        margin-bottom: 0;
        width: calc(50% - 12px);
        padding: 24px 0 0
    }
}

@media only screen and (min-width:1440px) {
    .contact-person {
        width: calc(50% - 20px);
        padding: 40px 0 0
    }
}

.contact-person--right {
    margin-left: auto;
    margin-top: 64px;
    padding: 0 0 24px
}

@media only screen and (min-width:1440px) {
    .contact-person--right {
        margin-top: 80px;
        padding: 0 0 40px
    }
}

.contact-person__images {
    position: relative;
    z-index: 2;
    width: calc(66.66667% + -5.33333px);
    box-shadow: 16px 16px 24px rgba(0, 0, 0, .64)
}

@media only screen and (min-width:720px) {
    .contact-person__images {
        width: calc(44.44444% + -13.33333px)
    }
}

@media only screen and (min-width:1024px) {
    .contact-person__images {
        width: calc(50% + -12px)
    }
}

@media only screen and (min-width:1440px) {
    .contact-person__images {
        width: calc(50% + -20px)
    }
}

.contact-person__images:active .contact-person__img--2,
.contact-person__images:hover .contact-person__img--2 {
    opacity: 1
}

@media only screen and (min-width:720px) {
    .contact-person__images--right {
        margin-left: calc(55.55556% + 13.33333px);
        box-shadow: -16px 16px 24px rgba(0, 0, 0, .64)
    }
}

.contact-person__img-container {
    padding-bottom: 150%
}

.contact-person__img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: 50% no-repeat;
    background-size: cover;
    transition: all .4s ease-in-out
}

.contact-person__img--2 {
    opacity: 0
}

.contact-person__info {
    background-color: #1a1c33;
    box-shadow: 16px 16px 32px rgba(0, 0, 0, .64);
    z-index: 1;
    position: relative;
    padding: 56px 24px 24px calc(16.66667% + 2.66667px);
    transform: translateY(-40px)
}

@media only screen and (min-width:720px) {
    .contact-person__info {
        width: calc(77.77778% + -5.33333px);
        margin-left: calc(22.22222% + 5.33333px);
        padding-top: 32px;
        padding-left: calc(22.22222% + 5.33333px);
        position: absolute;
        bottom: 0;
        transform: translateY(24px)
    }
}

@media only screen and (min-width:1024px) {
    .contact-person__info {
        width: calc(66.66667% + -8px);
        margin-left: calc(33.33333% + 8px);
        padding-left: calc(16.66667% + 4px);
        top: 0;
        bottom: auto;
        transform: translateY(0)
    }
}

@media only screen and (min-width:1440px) {
    .contact-person__info {
        width: calc(66.66667% + -13.33333px);
        margin-left: calc(33.33333% + 13.33333px);
        padding-left: calc(16.66667% + 6.66667px)
    }
}

@media only screen and (min-width:720px) {
    .contact-person__info--right {
        margin-left: 0;
        padding-top: 32px;
        padding-left: 24px;
        padding-right: calc(22.22222% + 5.33333px);
        box-shadow: -16px 16px 32px rgba(0, 0, 0, .64)
    }
}

@media only screen and (min-width:1024px) {
    .contact-person__info--right {
        bottom: 0;
        top: auto;
        padding-right: calc(16.66667% + 4px)
    }
}

@media only screen and (min-width:1440px) {
    .contact-person__info--right {
        padding-right: calc(16.66667% + 6.66667px)
    }
}

.contact-person__function {
    font-size: 19px;
    line-height: 24px;
    font-family: Grifo;
    color: #a1b0bf
}

.contact-person__name {
    font-size: 20px;
    line-height: 26px;
    font-family: Geomanist-Medium;
    margin: 12px 0 24px
}

@media screen and (min-width:720px) {
    .contact-person__name {
        font-size: 27px;
        line-height: 36px
    }
}

@media screen and (min-width:1440px) {
    .contact-person__name {
        font-size: 34px;
        line-height: 44px
    }
}

@media screen and (min-width:1600px) {
    .contact-person__name {
        font-size: 41px;
        line-height: 53px
    }
}

@media only screen and (min-width:1440px) {
    .contact-person__name {
        margin-bottom: 32px
    }
}

.contact-person__text {
    font-size: 18px;
    line-height: 35px;
    font-family: Geomanist;
    opacity: .64
}

@media screen and (min-width:1440px) {
    .contact-person__text {
        font-size: 23px;
        line-height: 44px
    }
}

@media only screen and (min-width:720px) {
    .contact-person__text--xs {
        display: none
    }
}

.contact-person__text--sm {
    display: none
}

@media only screen and (min-width:720px) {
    .contact-person__text--sm {
        display: block
    }
}

a.contact-person__text {
    text-decoration: underline;
    opacity: 1
}

a.contact-person__text:hover {
    opacity: .64;
    text-decoration: none
}

.portfolio-filters {
    font-size: 16px;
    line-height: 26px;
    font-family: Geomanist-Medium;
    overflow: hidden;
    box-shadow: 16px 16px 32px 0 rgba(0, 0, 0, .64);
    margin-top: 32px;
    position: relative;
    height: 74px;
    transition: all .3s;
    z-index: 5
}

@media screen and (min-width:1440px) {
    .portfolio-filters {
        font-size: 19px;
        line-height: 32px
    }
}

.portfolio-filters:after,
.portfolio-filters:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0
}

.portfolio-filters:before {
    height: 1px;
    width: 100%;
    background-image: linear-gradient(270deg, #fe2f4d, transparent);
    transition: width .3s
}

.portfolio-filters:after {
    bottom: 0;
    width: 1px;
    background-image: linear-gradient(180deg, #fe2f4d, transparent)
}

@media only screen and (min-width:720px) {
    .portfolio-filters {
        width: calc(83.33333% + -44px);
        height: auto !important;
        box-shadow: none !important;
        margin-top: 24px;
        overflow: visible
    }
    .portfolio-filters:after,
    .portfolio-filters:before {
        display: none
    }
}

@media only screen and (min-width:1024px) {
    .portfolio-filters {
        width: 100%;
        margin-top: 32px
    }
}

@media only screen and (min-width:1440px) {
    .portfolio-filters {
        margin-top: 40px
    }
}

.portfolio-filters.is-active {
    box-shadow: 16px 16px 32px 0 rgba(0, 0, 0, .64)
}

.portfolio-filters.is-active:before {
    width: 80px
}

.portfolio-filters__toggle {
    cursor: pointer;
    padding: 24px 16px;
    position: relative
}

.portfolio-filters__toggle:after {
    content: "";
    font-family: icon;
    position: absolute;
    transform: rotate(90deg);
    transition: transform .3s;
    right: 16px;
    color: #fff
}

@media only screen and (min-width:720px) {
    .portfolio-filters__toggle {
        display: none
    }
}

.portfolio-filters__toggle.is-active {
    color: #fff
}

.portfolio-filters__toggle.is-active:after {
    transform: rotate(-90deg)
}

.portfolio-filters__list {
    padding: 0 16px 24px
}

@media only screen and (min-width:720px) {
    .portfolio-filters__list {
        padding: 0
    }
}

@media only screen and (min-width:720px) {
    .usp-block__img--left {
        margin-right: 24px
    }
}

@media only screen and (min-width:1440px) {
    .usp-block__img--left {
        margin-right: 40px
    }
}

@media only screen and (min-width:720px) {
    .usp-block__img--right {
        margin-left: calc(8.33333% + 22px)
    }
}

@media only screen and (min-width:1440px) {
    .usp-block__img--right {
        margin-left: calc(8.33333% + 38px)
    }
}

.service-links {
    padding-bottom: 40px
}

@media only screen and (min-width:720px) {
    .service-links {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding-bottom: 56px
    }
}

@media only screen and (min-width:1024px) {
    .service-links {
        padding-bottom: 72px
    }
}

@media only screen and (min-width:1440px) {
    .service-links {
        padding-bottom: 96px
    }
}

@media only screen and (min-width:1600px) {
    .service-links {
        padding-bottom: 112px
    }
}

.service-link {
    width: 100%
}

@media only screen and (min-width:720px) {
    .service-link {
        width: calc(50% - 12px)
    }
}

@media only screen and (min-width:1440px) {
    .service-link {
        width: calc(50% - 20px)
    }
}

.service-link+.service-link {
    margin-top: 40px
}

@media only screen and (min-width:720px) {
    .service-link+.service-link {
        margin-top: 80px
    }
}

.service-link__img-container {
    margin-bottom: 24px;
    box-shadow: 16px 16px 32px rgba(0, 0, 0, .64);
    transition: transform .5s cubic-bezier(.75, 0, 0, 1), box-shadow .5s cubic-bezier(.75, 0, 0, 1)
}

.service-link__img-container:hover {
    transform: translateY(10px);
    box-shadow: 8px 8px 24px rgba(0, 0, 0, .64)
}

@media only screen and (min-width:720px) {
    .service-link__img-container {
        margin-bottom: 32px
    }
}

@media only screen and (min-width:1024px) {
    .service-link__img-container {
        width: calc(83.33333% + 4px)
    }
}

@media only screen and (min-width:1440px) {
    .service-link__img-container {
        margin-bottom: 40px;
        width: calc(83.33333% + 20px)
    }
}

.service-link__img-link {
    display: block;
    width: 100%;
    padding-bottom: 66.7%;
    overflow: hidden;
    background: no-repeat top;
    background-size: cover
}

@media only screen and (min-width:1024px) {
    .service-link__content {
        padding-left: calc(16.66667% + 8px)
    }
}

@media only screen and (min-width:1440px) {
    .service-link__content {
        padding-left: calc(16.66667% + 16px)
    }
}

.service-link__title {
    margin-bottom: 8px
}

.service-link__intro {
    font-size: 18px;
    line-height: 35px;
    font-family: Geomanist;
    opacity: .64;
    margin-bottom: 16px
}

@media screen and (min-width:1440px) {
    .service-link__intro {
        font-size: 23px;
        line-height: 44px
    }
}

.step-block__content {
    position: relative;
    padding-top: 32px
}

.step-block__content:after {
    content: "";
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    height: 56px;
    width: calc(50% + -36px);
    box-shadow: 28px -28px 32px 0 rgba(0, 0, 0, .32)
}

.slider__container {
    position: fixed;
    display: block;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform .5s ease-in-out;
    transition: -webkit-transform .5s ease-in-out;
    -o-transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out
}

.slider__page {
    position: relative;
    width: 100%;
    height: 100%
}

.slider__indicators {
    position: fixed;
    left: 18px;
    top: 50%;
    z-index: 2;
    margin: 0;
    padding: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.slider__indicator {
    display: block;
    width: 10px;
    height: 10px;
    margin: 10px 0;
    border-radius: 100px;
    background-color: #fff;
    cursor: default
}

.slider__indicator--active {
    opacity: .3
}

@media(min-width:1200px) and (max-width:1400px) {
    .promo-block .promo-text {
        padding-right: 20px
    }
}

@media(max-width:1600px) {
    .vertical-menu .container {
        width: 100%
    }
}

.vertical-menu .col-4 .portfolio-item {
    width: 33.3333%
}

@media(max-width:1200px) {
    .vertical-menu .header {
        width: 240px
    }
    .vertical-menu {
        padding-left: 240px
    }
    .vertical-menu .testimonial.style-1 .testi {
        width: 100%
    }
    .vertical-menu .col-4 .portfolio-item {
        width: 50%
    }
}

@media(min-width:992px) and (max-width:1199px) {
    .in-the-look li {
        width: 33.3333%
    }
    header {
        margin-top: 0px
    }
    .in-the-look li .inn-look {
        padding: 0 10px
    }
    .popurlar_product .over-item {
        padding-top: 40%
    }
    .popurlar_product .details-sec a {
        letter-spacing: 0
    }
    .small-r-items .btn {
        letter-spacing: 0
    }
    .small-r-items .media {
        width: 100%;
        float: left;
        padding-right: 15px;
        position: relative;
        z-index: 2;
        margin-bottom: 20px
    }
    .small-r-items h5 {
        width: 100%;
        margin-top: 30px;
        text-align: center
    }
    .small-r-items .item-img {
        width: 120px
    }
    .port-folio-row li .hover-port {
        padding-top: 10%
    }
    .furniture .items-fer li {
        width: 33.3333%
    }
    header .search-nav ul.dropdown {
        width: 100% !important
    }
    .header-style-2.header-style-3 .logo {
        margin: 20px 0;
        width: 100%;
        text-align: center
    }
    .header-style-2.header-style-3 nav {
        margin-top: 20px
    }
    .header-style-2.header-style-3 nav {
        width: 100%
    }
    .promo-block .promo-text {
        padding-right: 20px
    }
    .contact.style-2 .contact-right {
        padding-right: 15px;
        padding-left: 15px !important
    }
}

@media(min-width:768px) and (max-width:991px) {
    .in-the-look li {
        width: 50%
    }
    .popurlar_product .details-sec a {
        letter-spacing: 0
    }
    .popurlar_product li {
        width: 50%
    }
    .list-style li {
        width: 100%
    }
    .small-r-items .media {
        width: 50%;
        float: left;
        padding-right: 15px;
        position: relative;
        z-index: 2
    }
    .small-r-items h5 {
        width: 100%;
        margin-top: 30px;
        text-align: center
    }
    .small-r-items .item-img {
        width: 120px
    }
    .port-folio-row li {
        width: 50%
    }
    .furniture .items-fer li {
        width: 33.3333%
    }
    .header-style-2.header-style-3 .logo {
        margin: 20px 0;
        width: 100%;
        text-align: center
    }
    .header-style-2.header-style-3 nav {
        margin-top: 20px
    }
    .header-style-2.header-style-3 nav {
        width: 100%
    }
    .col-4 .portfolio-item {
        width: 50%
    }
    .testimonial .testi {
        width: 100%
    }
    .testimonial .flex-direction-nav {
        display: none
    }
    .promo-block .promo-text {
        padding-right: 20px
    }
    .process-style-3 li {
        width: 50%;
        margin-bottom: 60px
    }
    .process-style-3 li:before {
        top: 120%
    }
    .process-style-3 .icon:before {
        height: 20px
    }
    .contact.style-2 .contact-right {
        padding-right: 15px;
        padding-left: 15px !important
    }
    .services-mission .icon-box.ib-style-3 {
        display: inline-block;
        width: 100%
    }
}

@media(max-width:767px) {
    header.header-2 nav {
        padding-top: 0;
        text-align: left;
        background: #fff
    }
    .vertical-menu .header {
        width: 100%;
        position: relative;
        padding-top: 20px;
        margin-bottom: -5px
    }
    .vertical-menu .header .social-icons {
        display: none
    }
    .vertical-menu .header nav {
        margin-top: 10px
    }
    .vertical-menu {
        padding-left: 0
    }
    .collection-adds li {
        width: 50%;
        float: left;
        margin-bottom: 30px
    }
    .add_block_2 li {
        margin-bottom: 30px
    }
    .blog-posts .info {
        margin-bottom: 30px
    }
    p.intro-small {
        width: 100%
    }
    .subcribe h4 {
        width: 100%;
        margin-bottom: 20px
    }
    #contact_form li {
        margin-bottom: 10px
    }
    .our-clients p.intro {
        width: 100%
    }
    .services li .icon {
        margin-bottom: 10px
    }
    .services li {
        margin-bottom: 30px
    }
    .posts-list.list-style-1 .entry-body {
        padding: 20px
    }
    .welcome .icon-box.ib-style-1 {
        margin-bottom: 10px
    }
    .section-parthner ul {
        display: inline-block;
        width: 100%
    }
    .section-parthner ul li {
        width: 50%;
        float: left
    }
    header.coporate-header {
        background: #fff
    }
    header .is-sticky .sticky {
        padding: 0
    }
    header.coporate-header .is-sticky .sticky {
        position: relative !important
    }
    header.dark-text {
        background: rgba(255, 255, 255, .9)
    }
    .social-icons-large li {
        width: 25%;
        float: left
    }
    .team.style-6 ul li {
        width: 50%;
        float: left
    }
    .team.style-6 .team-image .social-icons {
        display: inline-block;
        width: 100%
    }
    .team.style-6 .team-image .social-icons li {
        width: auto;
        float: none;
        display: inline-block;
        margin-bottom: 0;
        display: inline-block;
        text-align: center
    }
    .process .process-style-2 li {
        width: 50%;
        margin-bottom: 30px
    }
    #cd-menu-trigger {
        left: 130px;
        top: 30px
    }
}

@media (max-width:640px) {
    .seasonals ul li {
        width: 100%
    }
    .construction .services-style-2 ul li {
        width: 100%;
        margin-top: 20px
    }
    .top-bar {
        height: auto
    }
    header .language {
        width: 100%;
        display: inline-block;
        text-align: left
    }
    .top-links {
        float: left;
        width: 100%;
        text-align: center
    }
    .top-links li {
        float: none;
        display: inline-block
    }
    .top-links ul {
        width: 100%
    }
    .top-links .social_icons {
        position: absolute;
        right: 0;
        top: 0;
        width: auto
    }
    .social-icons-large li {
        width: 50%;
        float: left;
        margin-bottom: 30px
    }
}

.let_us_help {
    padding: 70px 0;
    background-image: url(../images/ucohome/let_us_help_back.jpg);
    background-repeat: no-repeat;
    background-position: top
}

.let_us_help_title {
    color: #312f2f;
    font-size: 42px;
    text-transform: uppercase
}

.red_color_text: {
    color: #e5422b
}

.small_text {
    color: #717274;
    font-size: 16px;
    font-weight: 300
}

.small_text_title {
    color: #312f2f;
    font-size: 16px;
    font-weight: 500
}

.learn_more {
    background-color: #e5422b;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    border: 1px solid #e5422b;
    border-radius: 25px;
    padding: 15px 40px;
    margin-right: -10px
}

.contact_us {
    background-color: #fff;
    color: #6a6a6a;
    font-size: 16px;
    font-weight: 500;
    border: 1px solid #e9e9e9;
    border-radius: 25px;
    padding: 15px 40px;
    margin-left: -10px
}

.pad_tb_20 {
    padding: 20px 0
}

.ourservicesbox {
    display: contents;
    width: 100%;
    float: left;
    height: 100vh
}

.services_title {
    font-family: lato;
    color: #312f2f;
    font-size: 46px;
    font-weight: 900
}

.title {
    padding-bottom: 30px
}

.video_image {
    position: relative;
    padding: 0 0;
    height: 100vh
}

.video_image img {
    width: 100%
}

.play_btn_outer {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    width: 100px;
    height: 100px;
    box-shadow: 1px 1px 6px #a09898;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    line-height: 100px;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out
}

.play_btn_outer:hover {
    position: absolute;
    top: calc(50% - 40px);
    left: calc(50% - 40px);
    width: 80px;
    height: 80px;
    box-shadow: 1px 1px 6px #a09898;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    line-height: 100px
}

.play_btn {
    position: absolute;
    top: calc(50% - 40px);
    left: calc(50% - 40px);
    width: 80px;
    height: 80px;
    box-shadow: 1px 1px 6px #a09898;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    line-height: 80px;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out
}

.play_btn:hover {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    width: 100px;
    height: 100px;
    box-shadow: 1px 1px 6px #a09898;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    line-height: 100px;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out
}

.cd-img-replace {
    display: inline-block;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap
}

.cd-main-content {
    position: relative;
    z-index: 2;
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    transition-property: transform;
    -webkit-transition-duration: .4s;
    -moz-transition-duration: .4s;
    transition-duration: .4s
}

nav.navbar.navbar-inverse.mymenu {
    background-color: transparent !important;
    border-color: transparent !important;
    margin-bottom: 0
}

.menulist {
    float: right
}

.navbar-inverse.mymenu .navbar-nav>.active>a,
.navbar-inverse.mymenu .navbar-nav>.active>a:focus,
.navbar-inverse.mymenu .navbar-nav>.active>a:hover {
    color: #fff !important;
    border-bottom: 2px solid #eeb013 !important;
    border-color: transparent !important;
    background-color: transparent !important
}

.navbar-inverse.mymenu .navbar-nav>li {
    padding: 0 15px
}

.navbar-inverse.mymenu .navbar-nav>li>a {
    padding: 16px 0;
    padding-bottom: 24px;
    margin: 0;
    margin-top: 1px;
    border-color: transparent;
    text-decoration: none;
    line-height: 20px;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 2px;
    float: left;
    font-size: 13px;
    font-weight: 400;
    position: relative;
    border-bottom: 2px solid #fff;
    border-color: transparent
}

.dropdown,
.dropup {
    position: relative
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175)
}

ul.dropdown-menu {
    padding-bottom: 0;
    background: #141414;
    padding: 20px 35px
}

ul.dropdown-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-top: 20px;
    padding-bottom: 20px;
    z-index: 99;
    width: 250px !important;
    display: none !important
}

ul.dropdown-menu li {
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 99;
    width: 250px !important;
    padding-right: 35px;
    float: left
}

ul.dropdown-menu li a {
    text-transform: uppercase;
    border: none !important;
    line-height: 20px;
    background: 0 0;
    color: #dadada !important;
    font-size: 13px;
    display: inline-block;
    width: 100%;
    font-weight: 400;
    letter-spacing: 0;
    padding-right: 0;
    text-align: left;
    padding: 7px 0;
    white-space: unset
}

.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover {
    background: 0 0 !important;
    color: #e4a913 !important
}

.menulist {
    padding: 0
}

.glyphicon-chevron-right:before {
    content: "\f105" !important;
    font-family: FontAwesome !important;
    font-size: 49px !important;
    color: #fff !important;
    left: 17px !important;
    top: -9px !important;
    right: 0;
    position: absolute !important
}

.glyphicon-chevron-left:before {
    content: "\f104" !important;
    font-family: FontAwesome !important;
    font-size: 49px !important;
    color: #fff !important;
    left: 17px !important;
    top: -9px !important;
    right: 0;
    position: absolute !important
}

.carousel-control.left {
    background-image: unset !important
}

.carousel-control.right {
    background-image: unset !important
}

h1.services_title {
    margin-top: 0 !important
}

h1.ending_title {
    margin-top: 0 !important
}

@media only screen and (min-width:768px) {
    header li.dropdown:hover > .dropdown-menu {
        display: block !important
    }
}

.container-fluid.footerArea {
    background: #021041;
    padding-bottom: 25px;
    padding-top: 25px
}

#footer .block-title {
    color: #fff;
    font-size: 18px;
    letter-spacing: 1px;
    padding-top: 30px;
    margin-bottom: 25px;
    padding-bottom: 10px;
    position: relative;
    width: 100%;
    text-transform: uppercase;
    float: left;
    font-weight: 500
}

#footer .block-title span {
    position: relative
}

#footer .block-title span:after {
    background: #fbe105 !important;
    bottom: -10px;
    left: 0;
    content: "";
    height: 1px;
    position: absolute;
    width: 53px
}

.block-content {
    width: 100%;
    float: left
}

.block-content li {
    list-style: none;
    padding-bottom: 20px;
    font-family: lato;
    font-size: 14px;
    font-weight: 300;
    color: #fff
}

.block-content li a {
    color: #fff;
    transition: .7s;
    font-size: 14px;
    font-family: Lato;
    font-weight: 300
}

.block-content a:focus,
.block-content a:hover {
    color: #33b5e5 !important;
    text-decoration: none
}

.copyright p {
    width: 100%;
    float: left;
    text-align: center;
    margin: 13px;
    color: #434444;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px
}

.pad_bot_50 {
    padding-bottom: 50px
}

.pad_bot_70 {
    padding-bottom: 70px
}

.home_footer_ucodice_text {
    float: left;
    text-align: left;
    color: #fff;
    font-family: lato;
    font-weight: 700;
    font-size: 20px
}

.underline_text {
    font-weight: 400;
    font-size: 17px;
    color: #fff;
    text-decoration: underline;
    transition: 1s
}

.underline_text:hover {
    color: #33b5e5
}

.let_work {
    text-align: center;
    color: #fff;
    font-size: 40px;
    padding-bottom: 25px;
    font-size: 16px !important;
    color: #fff !important;
    margin-top: 30px !important;
    border-bottom: 1px solid #282a2b;
    padding-bottom: 20px
}

.blue_copyright p {
    text-align: center;
    color: #fff;
    font-weight: 400;
    font-size: 15px;
    padding-bottom: 0;
    float: initial;
    margin-bottom: 0;
    padding: 14px;
    background-color: #161617
}

.container-fluid.footerArea2 {
    background: #1f2021;
    padding-bottom: 30px;
    padding-left: 70px;
    background-repeat: no-repeat;
    background-position: center top;
    background-position: left -40px;
    background-image: url(../images/footer_background.jpg);
    background-repeat: repeat
}

.copyright p {
    width: 100%;
    float: left;
    text-align: center;
    margin: 13px;
    color: #434444;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px
}

.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover {
    background: 0 0;
    color: #e4a913 !important
}

.dark_blue {
    background-color: #161717 !important
}

.top_strip {
    background-color: #000;
    width: 100%;
    height: 80px
}

svg {
    max-width: 100%
}

[data-theme] {
    background-color: #fff;
    background-color: var(--color-bg, #fff);
    color: #303035;
    color: var(--color-contrast-high, #313135)
}

:root {
    --space-unit: 1em;
    --space-xxxxs: calc(0.125*var(--space-unit));
    --space-xxxs: calc(0.25*var(--space-unit));
    --space-xxs: calc(0.375*var(--space-unit));
    --space-xs: calc(0.5*var(--space-unit));
    --space-sm: calc(0.75*var(--space-unit));
    --space-md: calc(1.25*var(--space-unit));
    --space-lg: calc(2*var(--space-unit));
    --space-xl: calc(3.25*var(--space-unit));
    --space-xxl: calc(5.25*var(--space-unit));
    --space-xxxl: calc(8.5*var(--space-unit));
    --space-xxxxl: calc(13.75*var(--space-unit));
    --component-padding: var(--space-md)
}

:root {
    --max-width-xxs: 32rem;
    --max-width-xs: 38rem;
    --max-width-sm: 48rem;
    --max-width-md: 64rem;
    --max-width-lg: 80rem;
    --max-width-xl: 90rem;
    --max-width-xxl: 120rem
}

:root {
    --radius-sm: calc(var(--radius, 0.25em)/2);
    --radius-md: var(--radius, 0.25em);
    --radius-lg: calc(var(--radius, 0.25em)*2);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .085), 0 1px 8px rgba(0, 0, 0, .1);
    --shadow-md: 0 1px 8px rgba(0, 0, 0, .1), 0 8px 24px rgba(0, 0, 0, .15);
    --shadow-lg: 0 1px 8px rgba(0, 0, 0, .1), 0 16px 48px rgba(0, 0, 0, .1), 0 24px 60px rgba(0, 0, 0, .1);
    --bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
    --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1)
}

.icon {
    display: inline-block;
    color: inherit;
    fill: currentColor;
    height: 1em;
    width: 1em;
    line-height: 1;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.icon--xxs {
    font-size: 12px;
    font-size: var(--icon-xxs)
}

.icon--xs {
    font-size: 16px;
    font-size: var(--icon-xs)
}

.icon--sm {
    font-size: 24px;
    font-size: var(--icon-sm)
}

.icon--md {
    font-size: 32px;
    font-size: var(--icon-md)
}

.icon--lg {
    font-size: 48px;
    font-size: var(--icon-lg)
}

.icon--xl {
    font-size: 64px;
    font-size: var(--icon-xl)
}

.icon--xxl {
    font-size: 128px;
    font-size: var(--icon-xxl)
}

.icon--is-spinning {
    -webkit-animation: icon-spin 1s infinite linear;
    animation: icon-spin 1s infinite linear
}

@-webkit-keyframes icon-spin {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes icon-spin {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.icon use {
    color: inherit;
    fill: currentColor
}

@media not all and (min-width:32rem) {
    .display\@xs {
        display: none !important
    }
}

@media (min-width:32rem) {
    .hide\@xs {
        display: none !important
    }
}

@media not all and (min-width:48rem) {
    .display\@sm {
        display: none !important
    }
}

@media (min-width:48rem) {
    .hide\@sm {
        display: none !important
    }
}

@media not all and (min-width:64rem) {
    .display\@md {
        display: none !important
    }
}

@media (min-width:64rem) {
    .hide\@md {
        display: none !important
    }
}

@media not all and (min-width:80rem) {
    .display\@lg {
        display: none !important
    }
}

@media (min-width:80rem) {
    .hide\@lg {
        display: none !important
    }
}

@media not all and (min-width:90rem) {
    .display\@xl {
        display: none !important
    }
}

@media (min-width:90rem) {
    .hide\@xl {
        display: none !important
    }
}

:root {
    --display: block
}

.is-visible {
    display: block !important;
    display: var(--display) !important
}

.is-hidden {
    display: none !important
}

.sr-only {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
    padding: 0;
    border: 0;
    white-space: nowrap
}

.flex {
    display: -ms-flexbox;
    display: flex
}

.inline-flex {
    display: -ms-inline-flexbox;
    display: inline-flex
}

.flex-wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.flex-column {
    -ms-flex-direction: column;
    flex-direction: column
}

.flex-row {
    -ms-flex-direction: row;
    flex-direction: row
}

.flex-center {
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center
}

@media (min-width:32rem) {
    .flex-wrap\@xs {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
    .flex-column\@xs {
        -ms-flex-direction: column;
        flex-direction: column
    }
    .flex-row\@xs {
        -ms-flex-direction: row;
        flex-direction: row
    }
    .flex-center\@xs {
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-align: center;
        align-items: center
    }
    .justify-start\@xs {
        -ms-flex-pack: start;
        justify-content: flex-start
    }
    .justify-end\@xs {
        -ms-flex-pack: end;
        justify-content: flex-end
    }
    .justify-center\@xs {
        -ms-flex-pack: center;
        justify-content: center
    }
    .justify-between\@xs {
        -ms-flex-pack: justify;
        justify-content: space-between
    }
    .items-center\@xs {
        -ms-flex-align: center;
        align-items: center
    }
    .items-start\@xs {
        -ms-flex-align: start;
        align-items: flex-start
    }
    .items-end\@xs {
        -ms-flex-align: end;
        align-items: flex-end
    }
}

@media (min-width:48rem) {
    .flex-wrap\@sm {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
    .flex-column\@sm {
        -ms-flex-direction: column;
        flex-direction: column
    }
    .flex-row\@sm {
        -ms-flex-direction: row;
        flex-direction: row
    }
    .flex-center\@sm {
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-align: center;
        align-items: center
    }
    .justify-start\@sm {
        -ms-flex-pack: start;
        justify-content: flex-start
    }
    .justify-end\@sm {
        -ms-flex-pack: end;
        justify-content: flex-end
    }
    .justify-center\@sm {
        -ms-flex-pack: center;
        justify-content: center
    }
    .justify-between\@sm {
        -ms-flex-pack: justify;
        justify-content: space-between
    }
    .items-center\@sm {
        -ms-flex-align: center;
        align-items: center
    }
    .items-start\@sm {
        -ms-flex-align: start;
        align-items: flex-start
    }
    .items-end\@sm {
        -ms-flex-align: end;
        align-items: flex-end
    }
}

@media (min-width:64rem) {
    .flex-wrap\@md {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
    .flex-column\@md {
        -ms-flex-direction: column;
        flex-direction: column
    }
    .flex-row\@md {
        -ms-flex-direction: row;
        flex-direction: row
    }
    .flex-center\@md {
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-align: center;
        align-items: center
    }
    .justify-start\@md {
        -ms-flex-pack: start;
        justify-content: flex-start
    }
    .justify-end\@md {
        -ms-flex-pack: end;
        justify-content: flex-end
    }
    .justify-center\@md {
        -ms-flex-pack: center;
        justify-content: center
    }
    .justify-between\@md {
        -ms-flex-pack: justify;
        justify-content: space-between
    }
    .items-center\@md {
        -ms-flex-align: center;
        align-items: center
    }
    .items-start\@md {
        -ms-flex-align: start;
        align-items: flex-start
    }
    .items-end\@md {
        -ms-flex-align: end;
        align-items: flex-end
    }
}

@media (min-width:80rem) {
    .flex-wrap\@lg {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
    .flex-column\@lg {
        -ms-flex-direction: column;
        flex-direction: column
    }
    .flex-row\@lg {
        -ms-flex-direction: row;
        flex-direction: row
    }
    .flex-center\@lg {
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-align: center;
        align-items: center
    }
    .justify-start\@lg {
        -ms-flex-pack: start;
        justify-content: flex-start
    }
    .justify-end\@lg {
        -ms-flex-pack: end;
        justify-content: flex-end
    }
    .justify-center\@lg {
        -ms-flex-pack: center;
        justify-content: center
    }
    .justify-between\@lg {
        -ms-flex-pack: justify;
        justify-content: space-between
    }
    .items-center\@lg {
        -ms-flex-align: center;
        align-items: center
    }
    .items-start\@lg {
        -ms-flex-align: start;
        align-items: flex-start
    }
    .items-end\@lg {
        -ms-flex-align: end;
        align-items: flex-end
    }
}

@media (min-width:90rem) {
    .flex-wrap\@xl {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
    .flex-column\@xl {
        -ms-flex-direction: column;
        flex-direction: column
    }
    .flex-row\@xl {
        -ms-flex-direction: row;
        flex-direction: row
    }
    .flex-center\@xl {
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-align: center;
        align-items: center
    }
    .justify-start\@xl {
        -ms-flex-pack: start;
        justify-content: flex-start
    }
    .justify-end\@xl {
        -ms-flex-pack: end;
        justify-content: flex-end
    }
    .justify-center\@xl {
        -ms-flex-pack: center;
        justify-content: center
    }
    .justify-between\@xl {
        -ms-flex-pack: justify;
        justify-content: space-between
    }
    .items-center\@xl {
        -ms-flex-align: center;
        align-items: center
    }
    .items-start\@xl {
        -ms-flex-align: start;
        align-items: flex-start
    }
    .items-end\@xl {
        -ms-flex-align: end;
        align-items: flex-end
    }
}

.flex-grow {
    -ms-flex-positive: 1;
    flex-grow: 1
}

.flex-shrink-0 {
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.flex-gap-xxxs {
    margin-bottom: -.25em;
    margin-bottom: calc(-1*var(--space-xxxs));
    margin-right: -.25em;
    margin-right: calc(-1*var(--space-xxxs))
}

.flex-gap-xxxs>* {
    margin-bottom: .25em;
    margin-bottom: var(--space-xxxs);
    margin-right: .25em;
    margin-right: var(--space-xxxs)
}

.flex-gap-xxs {
    margin-bottom: -.375em;
    margin-bottom: calc(-1*var(--space-xxs));
    margin-right: -.375em;
    margin-right: calc(-1*var(--space-xxs))
}

.flex-gap-xxs>* {
    margin-bottom: .375em;
    margin-bottom: var(--space-xxs);
    margin-right: .375em;
    margin-right: var(--space-xxs)
}

.flex-gap-xs {
    margin-bottom: -.5em;
    margin-bottom: calc(-1*var(--space-xs));
    margin-right: -.5em;
    margin-right: calc(-1*var(--space-xs))
}

.flex-gap-xs>* {
    margin-bottom: .5em;
    margin-bottom: var(--space-xs);
    margin-right: .5em;
    margin-right: var(--space-xs)
}

.flex-gap-sm {
    margin-bottom: -.75em;
    margin-bottom: calc(-1*var(--space-sm));
    margin-right: -.75em;
    margin-right: calc(-1*var(--space-sm))
}

.flex-gap-sm>* {
    margin-bottom: .75em;
    margin-bottom: var(--space-sm);
    margin-right: .75em;
    margin-right: var(--space-sm)
}

.flex-gap-md {
    margin-bottom: -1.25em;
    margin-bottom: calc(-1*var(--space-md));
    margin-right: -1.25em;
    margin-right: calc(-1*var(--space-md))
}

.flex-gap-md>* {
    margin-bottom: 1.25em;
    margin-bottom: var(--space-md);
    margin-right: 1.25em;
    margin-right: var(--space-md)
}

.flex-gap-lg {
    margin-bottom: -2em;
    margin-bottom: calc(-1*var(--space-lg));
    margin-right: -2em;
    margin-right: calc(-1*var(--space-lg))
}

.flex-gap-lg>* {
    margin-bottom: 2em;
    margin-bottom: var(--space-lg);
    margin-right: 2em;
    margin-right: var(--space-lg)
}

.flex-gap-xl {
    margin-bottom: -3.25em;
    margin-bottom: calc(-1*var(--space-xl));
    margin-right: -3.25em;
    margin-right: calc(-1*var(--space-xl))
}

.flex-gap-xl>* {
    margin-bottom: 3.25em;
    margin-bottom: var(--space-xl);
    margin-right: 3.25em;
    margin-right: var(--space-xl)
}

.flex-gap-xxl {
    margin-bottom: -5.25em;
    margin-bottom: calc(-1*var(--space-xxl));
    margin-right: -5.25em;
    margin-right: calc(-1*var(--space-xxl))
}

.flex-gap-xxl>* {
    margin-bottom: 5.25em;
    margin-bottom: var(--space-xxl);
    margin-right: 5.25em;
    margin-right: var(--space-xxl)
}

.margin-xxxxs {
    margin: .125em;
    margin: var(--space-xxxxs)
}

.margin-xxxs {
    margin: .25em;
    margin: var(--space-xxxs)
}

.margin-xxs {
    margin: .375em;
    margin: var(--space-xxs)
}

.margin-xs {
    margin: .5em;
    margin: var(--space-xs)
}

.margin-sm {
    margin: .75em;
    margin: var(--space-sm)
}

.margin-md {
    margin: 1.25em;
    margin: var(--space-md)
}

.margin-lg {
    margin: 2em;
    margin: var(--space-lg)
}

.margin-xl {
    margin: 3.25em;
    margin: var(--space-xl)
}

.margin-xxl {
    margin: 5.25em;
    margin: var(--space-xxl)
}

.margin-xxxl {
    margin: 8.5em;
    margin: var(--space-xxxl)
}

.margin-xxxxl {
    margin: 13.75em;
    margin: var(--space-xxxxl)
}

.margin-auto {
    margin: auto
}

.margin-top-xxxxs {
    margin-top: .125em;
    margin-top: var(--space-xxxxs)
}

.margin-top-xxxs {
    margin-top: .25em;
    margin-top: var(--space-xxxs)
}

.margin-top-xxs {
    margin-top: .375em;
    margin-top: var(--space-xxs)
}

.margin-top-xs {
    margin-top: .5em;
    margin-top: var(--space-xs)
}

.margin-top-sm {
    margin-top: .75em;
    margin-top: var(--space-sm)
}

.margin-top-md {
    margin-top: 1.25em;
    margin-top: var(--space-md)
}

.margin-top-lg {
    margin-top: 2em;
    margin-top: var(--space-lg)
}

.margin-top-xl {
    margin-top: 3.25em;
    margin-top: var(--space-xl)
}

.margin-top-xxl {
    margin-top: 5.25em;
    margin-top: var(--space-xxl)
}

.margin-top-xxxl {
    margin-top: 8.5em;
    margin-top: var(--space-xxxl)
}

.margin-top-xxxxl {
    margin-top: 13.75em;
    margin-top: var(--space-xxxxl)
}

.margin-top-auto {
    margin-top: auto
}

.margin-bottom-xxxxs {
    margin-bottom: .125em;
    margin-bottom: var(--space-xxxxs)
}

.margin-bottom-xxxs {
    margin-bottom: .25em;
    margin-bottom: var(--space-xxxs)
}

.margin-bottom-xxs {
    margin-bottom: .375em;
    margin-bottom: var(--space-xxs)
}

.margin-bottom-xs {
    margin-bottom: .5em;
    margin-bottom: var(--space-xs)
}

.margin-bottom-sm {
    margin-bottom: .75em;
    margin-bottom: var(--space-sm)
}

.margin-bottom-md {
    margin-bottom: 1.25em;
    margin-bottom: var(--space-md)
}

.margin-bottom-lg {
    margin-bottom: 2em;
    margin-bottom: var(--space-lg)
}

.margin-bottom-xl {
    margin-bottom: 3.25em;
    margin-bottom: var(--space-xl)
}

.margin-bottom-xxl {
    margin-bottom: 5.25em;
    margin-bottom: var(--space-xxl)
}

.margin-bottom-xxxl {
    margin-bottom: 8.5em;
    margin-bottom: var(--space-xxxl)
}

.margin-bottom-xxxxl {
    margin- bottom: 13.75em;
    margin-bottom: var(--space-xxxxl)
}

.margin-bottom-auto {
    margin-bottom: auto
}

.margin-right-xxxxs {
    margin-right: .125em;
    margin-right: var(--space-xxxxs)
}

.margin-right-xxxs {
    margin-right: .25em;
    margin-right: var(--space-xxxs)
}

.margin-right-xxs {
    margin-right: .375em;
    margin-right: var(--space-xxs)
}

.margin-right-xs {
    margin-right: .5em;
    margin-right: var(--space-xs)
}

.margin-right-sm {
    margin-right: .75em;
    margin-right: var(--space-sm)
}

.margin-right-md {
    margin-right: 1.25em;
    margin-right: var(--space-md)
}

.margin-right-lg {
    margin-right: 2em;
    margin-right: var(--space-lg)
}

.margin-right-xl {
    margin-right: 3.25em;
    margin-right: var(--space-xl)
}

.margin-right-xxl {
    margin-right: 5.25em;
    margin-right: var(--space-xxl)
}

.margin-right-xxxl {
    margin-right: 8.5em;
    margin-right: var(--space-xxxl)
}

.margin-right-xxxxl {
    margin-right: 13.75em;
    margin-right: var(--space-xxxxl)
}

.margin-right-auto {
    margin-right: auto
}

.margin-left-xxxxs {
    margin-left: .125em;
    margin-left: var(--space-xxxxs)
}

.margin-left-xxxs {
    margin-left: .25em;
    margin-left: var(--space-xxxs)
}

.margin-left-xxs {
    margin-left: .375em;
    margin-left: var(--space-xxs)
}

.margin-left-xs {
    margin-left: .5em;
    margin-left: var(--space-xs)
}

.margin-left-sm {
    margin-left: .75em;
    margin-left: var(--space-sm)
}

.margin-left-md {
    margin-left: 1.25em;
    margin-left: var(--space-md)
}

.margin-left-lg {
    margin-left: 2em;
    margin-left: var(--space-lg)
}

.margin-left-xl {
    margin-left: 3.25em;
    margin-left: var(--space-xl)
}

.margin-left-xxl {
    margin-left: 5.25em;
    margin-left: var(--space-xxl)
}

.margin-left-xxxl {
    margin-left: 8.5em;
    margin-left: var(--space-xxxl)
}

.margin-left-xxxxl {
    margin-left: 13.75em;
    margin-left: var(--space-xxxxl)
}

.margin-left-auto {
    margin-left: auto
}

.margin-x-xxxxs {
    margin-left: .125em;
    margin-left: var(--space-xxxxs);
    margin-right: .125em;
    margin-right: var(--space-xxxxs)
}

.margin-x-xxxs {
    margin-left: .25em;
    margin-left: var(--space-xxxs);
    margin-right: .25em;
    margin-right: var(--space-xxxs)
}

.margin-x-xxs {
    margin-left: .375em;
    margin-left: var(--space-xxs);
    margin-right: .375em;
    margin-right: var(--space-xxs)
}

.margin-x-xs {
    margin-left: .5em;
    margin-left: var(--space-xs);
    margin-right: .5em;
    margin-right: var(--space-xs)
}

.margin-x-sm {
    margin-left: .75em;
    margin-left: var(--space-sm);
    margin-right: .75em;
    margin-right: var(--space-sm)
}

.margin-x-md {
    margin-left: 1.25em;
    margin-left: var(--space-md);
    margin-right: 1.25em;
    margin-right: var(--space-md)
}

.margin-x-lg {
    margin-left: 2em;
    margin-left: var(--space-lg);
    margin-right: 2em;
    margin-right: var(--space-lg)
}

.margin-x-xl {
    margin-left: 3.25em;
    margin-left: var(--space-xl);
    margin-right: 3.25em;
    margin-right: var(--space-xl)
}

.margin-x-xxl {
    margin-left: 5.25em;
    margin-left: var(--space-xxl);
    margin-right: 5.25em;
    margin-right: var(--space-xxl)
}

.margin-x-xxxl {
    margin-left: 8.5em;
    margin-left: var(--space-xxxl);
    margin-right: 8.5em;
    margin-right: var(--space-xxxl)
}

.margin-x-xxxxl {
    margin-left: 13.75em;
    margin-left: var(--space-xxxxl);
    margin-right: 13.75em;
    margin-right: var(--space-xxxxl)
}

.margin-x-auto {
    margin-left: auto;
    margin-right: auto
}

.margin-y-xxxxs {
    margin-top: .125em;
    margin-top: var(--space-xxxxs);
    margin-bottom: .125em;
    margin-bottom: var(--space-xxxxs)
}

.margin-y-xxxs {
    margin-top: .25em;
    margin-top: var(--space-xxxs);
    margin-bottom: .25em;
    margin-bottom: var(--space-xxxs)
}

.margin-y-xxs {
    margin-top: .375em;
    margin-top: var(--space-xxs);
    margin-bottom: .375em;
    margin-bottom: var(--space-xxs)
}

.margin-y-xs {
    margin-top: .5em;
    margin-top: var(--space-xs);
    margin-bottom: .5em;
    margin-bottom: var(--space-xs)
}

.margin-y-sm {
    margin-top: .75em;
    margin-top: var(--space-sm);
    margin-bottom: .75em;
    margin-bottom: var(--space-sm)
}

.margin-y-md {
    margin-top: 1.25em;
    margin-top: var(--space-md);
    margin-bottom: 1.25em;
    margin-bottom: var(--space-md)
}

.margin-y-lg {
    margin-top: 2em;
    margin-top: var(--space-lg);
    margin-bottom: 2em;
    margin-bottom: var(--space-lg)
}

.margin-y-xl {
    margin-top: 3.25em;
    margin-top: var(--space-xl);
    margin-bottom: 3.25em;
    margin-bottom: var(--space-xl)
}

.margin-y-xxl {
    margin-top: 5.25em;
    margin-top: var(--space-xxl);
    margin-bottom: 5.25em;
    margin-bottom: var(--space-xxl)
}

.margin-y-xxxl {
    margin-top: 8.5em;
    margin-top: var(--space-xxxl);
    margin-bottom: 8.5em;
    margin-bottom: var(--space-xxxl)
}

.margin-y-xxxxl {
    margin-top: 13.75em;
    margin-top: var(--space-xxxxl);
    margin-bottom: 13.75em;
    margin-bottom: var(--space-xxxxl)
}

.margin-y-auto {
    margin-top: auto;
    margin-bottom: auto
}

@media not all and (min-width:32rem) {
    .has-margin\@xs {
        margin: 0 !important
    }
}

@media not all and (min-width:48rem) {
    .has-margin\@sm {
        margin: 0 !important
    }
}

@media not all and (min-width:64rem) {
    .has-margin\@md {
        margin: 0 !important
    }
}

@media not all and (min-width:80rem) {
    .has-margin\@lg {
        margin: 0 !important
    }
}

@media not all and (min-width:90rem) {
    .has-margin\@xl {
        margin: 0 !important
    }
}

.text-replace {
    overflow: hidden;
    color: transparent;
    text-indent: 100%;
    white-space: nowrap
}

.text-center {
    text-align: center
}

.text-left {
    text-align: left
}

.text-right {
    text-align: right
}

@media (min-width:32rem) {
    .text-center\@xs {
        text-align: center
    }
    .text-left\@xs {
        text-align: left
    }
    .text-right\@xs {
        text-align: right
    }
}

@media (min-width:48rem) {
    .text-center\@sm {
        text-align: center
    }
    .text-left\@sm {
        text-align: left
    }
    .text-right\@sm {
        text-align: right
    }
}

@media (min-width:64rem) {
    .text-center\@md {
        text-align: center
    }
    .text-left\@md {
        text-align: left
    }
    .text-right\@md {
        text-align: right
    }
}

@media (min-width:80rem) {
    .text-center\@lg {
        text-align: center
    }
    .text-left\@lg {
        text-align: left
    }
    .text-right\@lg {
        text-align: right
    }
}

@media (min-width:90rem) {
    .text-center\@xl {
        text-align: center
    }
    .text-left\@xl {
        text-align: left
    }
    .text-right\@xl {
        text-align: right
    }
}

.color-inherit {
    color: inherit
}

.color-contrast-medium {
    color: #79797b;
    color: var(--color-contrast-medium, #79797c)
}

:root,
[data-theme=default] {
    --color-primary-darker: hsl(220, 90%, 36%);
    --color-primary-darker-h: 220;
    --color-primary-darker-s: 90%;
    --color-primary-darker-l: 36%;
    --color-primary-dark: hsl(220, 90%, 46%);
    --color-primary-dark-h: 220;
    --color-primary-dark-s: 90%;
    --color-primary-dark-l: 46%;
    --color-primary: hsl(220, 90%, 56%);
    --color-primary-h: 220;
    --color-primary-s: 90%;
    --color-primary-l: 56%;
    --color-primary-light: hsl(220, 90%, 66%);
    --color-primary-light-h: 220;
    --color-primary-light-s: 90%;
    --color-primary-light-l: 66%;
    --color-primary-lighter: hsl(220, 90%, 76%);
    --color-primary-lighter-h: 220;
    --color-primary-lighter-s: 90%;
    --color-primary-lighter-l: 76%;
    --color-accent-darker: hsl(355, 90%, 41%);
    --color-accent-darker-h: 355;
    --color-accent-darker-s: 90%;
    --color-accent-darker-l: 41%;
    --color-accent-dark: hsl(355, 90%, 51%);
    --color-accent-dark-h: 355;
    --color-accent-dark-s: 90%;
    --color-accent-dark-l: 51%;
    --color-accent: hsl(355, 90%, 61%);
    --color-accent-h: 355;
    --color-accent-s: 90%;
    --color-accent-l: 61%;
    --color-accent-light: hsl(355, 90%, 71%);
    --color-accent-light-h: 355;
    --color-accent-light-s: 90%;
    --color-accent-light-l: 71%;
    --color-accent-lighter: hsl(355, 90%, 81%);
    --color-accent-lighter-h: 355;
    --color-accent-lighter-s: 90%;
    --color-accent-lighter-l: 81%;
    --color-black: hsl(240, 8%, 12%);
    --color-black-h: 240;
    --color-black-s: 8%;
    --color-black-l: 12%;
    --color-white: hsl(0, 0%, 100%);
    --color-white-h: 0;
    --color-white-s: 0%;
    --color-white-l: 100%;
    --color-success-darker: hsl(94, 48%, 36%);
    --color-success-darker-h: 94;
    --color-success-darker-s: 48%;
    --color-success-darker-l: 36%;
    --color-success-dark: hsl(94, 48%, 46%);
    --color-success-dark-h: 94;
    --color-success-dark-s: 48%;
    --color-success-dark-l: 46%;
    --color-success: hsl(94, 48%, 56%);
    --color-success-h: 94;
    --color-success-s: 48%;
    --color-success-l: 56%;
    --color-success-light: hsl(94, 48%, 66%);
    --color-success-light-h: 94;
    --color-success-light-s: 48%;
    --color-success-light-l: 66%;
    --color-success-lighter: hsl(94, 48%, 76%);
    --color-success-lighter-h: 94;
    --color-success-lighter-s: 48%;
    --color-success-lighter-l: 76%;
    --color-error-darker: hsl(355, 90%, 41%);
    --color-error-darker-h: 355;
    --color-error-darker-s: 90%;
    --color-error-darker-l: 41%;
    --color-error-dark: hsl(355, 90%, 51%);
    --color-error-dark-h: 355;
    --color-error-dark-s: 90%;
    --color-error-dark-l: 51%;
    --color-error: hsl(355, 90%, 61%);
    --color-error-h: 355;
    --color-error-s: 90%;
    --color-error-l: 61%;
    --color-error-light: hsl(355, 90%, 71%);
    --color-error-light-h: 355;
    --color-error-light-s: 90%;
    --color-error-light-l: 71%;
    --color-error-lighter: hsl(355, 90%, 81%);
    --color-error-lighter-h: 355;
    --color-error-lighter-s: 90%;
    --color-error-lighter-l: 81%;
    --color-warning-darker: hsl(46, 100%, 41%);
    --color-warning-darker-h: 46;
    --color-warning-darker-s: 100%;
    --color-warning-darker-l: 41%;
    --color-warning-dark: hsl(46, 100%, 51%);
    --color-warning-dark-h: 46;
    --color-warning-dark-s: 100%;
    --color-warning-dark-l: 51%;
    --color-warning: hsl(46, 100%, 61%);
    --color-warning-h: 46;
    --color-warning-s: 100%;
    --color-warning-l: 61%;
    --color-warning-light: hsl(46, 100%, 71%);
    --color-warning-light-h: 46;
    --color-warning-light-s: 100%;
    --color-warning-light-l: 71%;
    --color-warning-lighter: hsl(46, 100%, 81%);
    --color-warning-lighter-h: 46;
    --color-warning-lighter-s: 100%;
    --color-warning-lighter-l: 81%;
    --color-bg: hsl(0, 0%, 100%);
    --color-bg-h: 0;
    --color-bg-s: 0%;
    --color-bg-l: 100%;
    --color-contrast-lower: hsl(0, 0%, 95%);
    --color-contrast-lower-h: 0;
    --color-contrast-lower-s: 0%;
    --color-contrast-lower-l: 95%;
    --color-contrast-low: hsl(240, 1%, 83%);
    --color-contrast-low-h: 240;
    --color-contrast-low-s: 1%;
    --color-contrast-low-l: 83%;
    --color-contrast-medium: hsl(240, 1%, 48%);
    --color-contrast-medium-h: 240;
    --color-contrast-medium-s: 1%;
    --color-contrast-medium-l: 48%;
    --color-contrast-high: hsl(240, 4%, 20%);
    --color-contrast-high-h: 240;
    --color-contrast-high-s: 4%;
    --color-contrast-high-l: 20%;
    --color-contrast-higher: hsl(240, 8%, 12%);
    --color-contrast-higher-h: 240;
    --color-contrast-higher-s: 8%;
    --color-contrast-higher-l: 12%
}

@supports (--css:variables) {
    @media (min-width: 64rem) {
        :root {
            --space-unit:1.25em
        }
    }
}

:root {
    --radius: 0.25em
}

:root {
    --font-primary: sans-serif;
    --text-base-size: 1em;
    --text-scale-ratio: 1.2;
    --text-xs: calc(1em/var(--text-scale-ratio)/var(--text-scale-ratio));
    --text-sm: calc(var(--text-xs)*var(--text-scale-ratio));
    --text-md: calc(var(--text-sm)*var(--text-scale-ratio)*var(--text-scale-ratio));
    --text-lg: calc(var(--text-md)*var(--text-scale-ratio));
    --text-xl: calc(var(--text-lg)*var(--text-scale-ratio));
    --text-xxl: calc(var(--text-xl)*var(--text-scale-ratio));
    --text-xxxl: calc(var(--text-xxl)*var(--text-scale-ratio));
    --body-line-height: 1.4;
    --heading-line-height: 1.2;
    --font-primary-capital-letter: 1
}

@supports (--css:variables) {
    @media (min-width: 64rem) {
        :root {
            --text-base-size:1.25em;
            --text-scale-ratio: 1.25
        }
    }
}

.text-component blockquote {
    padding-left: 1em;
    border-left: 4px solid #d3d3d4;
    border-left: 4px solid var(--color-contrast-low)
}

.text-component hr {
    background: #d3d3d4;
    background: var(--color-contrast-low);
    height: 1px
}

.text-component figcaption {
    font-size: .83333em;
    font-size: var(--text-sm);
    color: #79797b;
    color: var(--color-contrast-medium)
}

:root {
    --cd-color-1: hsl(214, 28%, 20%);
    --cd-color-1-h: 214;
    --cd-color-1-s: 28%;
    --cd-color-1-l: 20%;
    --cd-color-2: hsl(151, 13%, 66%);
    --cd-color-2-h: 151;
    --cd-color-2-s: 13%;
    --cd-color-2-l: 66%;
    --cd-color-3: hsl(213, 9%, 44%);
    --cd-color-3-h: 213;
    --cd-color-3-s: 9%;
    --cd-color-3-l: 44%;
    --font-primary: 'Open Sans', sans-serif;
    --font-secondary: 'Merriweather', serif
}

.cd-main {
    overflow: hidden;
    height: auto
}

.cd-main__content {
    position: relative;
    z-index: 2;
    background-color: #9db3a8;
    background-color: var(--cd-color-2);
    will-change: transform;
    transition: -webkit-transform .7s cubic-bezier(.91, .01, .6, .99);
    transition: transform .7s cubic-bezier(.91, .01, .6, .99);
    transition: transform .7s cubic-bezier(.91, .01, .6, .99), -webkit-transform .7s cubic-bezier(.91, .01, .6, .99)
}

.nav-is-open .cd-main__content {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%)
}

.js .cd-nav {
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #000;
    visibility: hidden;
    transition: visibility .7s;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.js .cd-nav a {
    text-decoration: none
}

.js .cd-nav__title {
    position: relative;
    font-size: .69444em;
    font-size: var(--text-xs);
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .15em
}

.js .cd-nav__title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -20px;
    height: 1px;
    width: 60px;
    background-color: currentColor
}

.js .nav-is-open .cd-nav {
    visibility: visible
}

.js .cd-nav__content {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 2em 0 2em 80px;
    padding: var(--space-lg) 0 var(--space-lg) 80px;
    will-change: transform;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    transition: -webkit-transform .7s cubic-bezier(.86, .01, .77, .78);
    transition: transform .7s cubic-bezier(.86, .01, .77, .78);
    transition: transform .7s cubic-bezier(.86, .01, .77, .78), -webkit-transform .7s cubic-bezier(.86, .01, .77, .78)
}

@media (min-width:64rem) {
    .js .cd-nav__content {
        padding-left: 0
    }
}

@media (max-width:1920px) {
    .js .cd-nav__content .container {
        width: 100%;
        padding: 0 8%
    }
}

.js .nav-is-open .cd-nav__content {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    transition: -webkit-transform .5s cubic-bezier(.82, .01, .77, .78);
    transition: transform .5s cubic-bezier(.82, .01, .77, .78);
    transition: transform .5s cubic-bezier(.82, .01, .77, .78), -webkit-transform .5s cubic-bezier(.82, .01, .77, .78)
}

.js .cd-nav__primary {
    margin-top: 3.25em;
    margin-top: var(--space-xl)
}

.js .cd-nav__primary li {
    margin-bottom: 1.25em;
    margin-bottom: var(--space-md)
}

.js .cd-nav__link {
    font-family: lato;
    font-size: 1.44em;
    font-size: var(--text-lg);
    color: #fff
}

@media (min-width:80rem) {
    .js .cd-nav__link {
        font-size: 26px;
        font-family: alef;
        letter-spacing: 1px;
        font-weight: 900
    }
}

.js .cd-nav__link-selected,
.js .cd-nav__link:hover {
    color: #fff
}

.js .cd-nav__contact {
    margin-top: 3.25em;
    margin-top: var(--space-xl)
}

.js .cd-nav__contact li {
    font-family: Merriweather, serif;
    float: left;
    margin-left: 30px;
    font-family: var(--font-secondary);
    margin-bottom: 1.25em;
    margin-bottom: var(--space-md);
    color: hsla(0, 0%, 100%, .3);
    color: hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), .3)
}

.js .cd-nav__contact a {
    opacity: .6;
    background-color: #ff0
}

.js .cd-nav__contact a:hover {
    opacity: 1
}

@media (min-width:64rem) {
    .js .cd-nav__contact {
        margin-top: calc(3.25em + 20px);
        margin-top: calc(var(--space-xl) + 20px) margin-top: 5%
    }
}

.cd-nav-trigger {
    display: none;
    position: fixed;
    z-index: 100;
    top: 10px;
    right: 1.25em;
    right: var(--component-padding);
    height: 40px;
    width: 40px;
    border-radius: 50%;
    transition: -webkit-transform .5s;
    transition: transform .5s;
    transition: transform .5s, -webkit-transform .5s
}

.cd-nav-trigger:active .cd-nav-trigger__icon {
    -webkit-transform: scale(.9);
    -ms-transform: scale(.9);
    transform: scale(.9)
}

.cd-nav-trigger svg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%
}

.cd-nav-trigger circle {
    stroke: #666f7a;
    stroke: var(--cd-color-3);
    transition: stroke-dashoffset .4s
}

.nav-is-open .cd-nav-trigger {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.nav-is-open .cd-nav-trigger circle {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset .4s .3s
}

.cd-nav-trigger__icon {
    position: absolute;
    top: calc(50% - 1px);
    left: calc(50% - 12px);
    width: 22px;
    height: 2px;
    background-color: #fbe105;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s
}

.cd-nav-trigger__icon::before,
.cd-nav-trigger__icon:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 70%;
    height: 100%;
    background-color: inherit;
    will-change: transform, width, top;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: width .5s, top .3s, -webkit-transform .5s;
    transition: transform .5s, width .5s, top .3s;
    transition: transform .5s, width .5s, top .3s, -webkit-transform .5s
}

.cd-nav-trigger__icon::before {
    -webkit-transform-origin: right top;
    -ms-transform-origin: right top;
    transform-origin: right top;
    -webkit-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    transform: translateY(-6px)
}

.cd-nav-trigger__icon::after {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
    width: 100%
}

.nav-is-open .cd-nav-trigger__icon::after,
.nav-is-open .cd-nav-trigger__icon::before {
    width: 50%
}

.nav-is-open .cd-nav-trigger__icon::before {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.nav-is-open .cd-nav-trigger__icon::after {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.nav-is-open .cd-nav-trigger:hover .cd-nav-trigger__icon::after,
.nav-is-open .cd-nav-trigger:hover .cd-nav-trigger__icon::before {
    top: 0
}

.cd-main__content {
    background-color: #fff;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center
}

.cd-main__content h1 {
    color: #243141;
    color: var(--cd-color-1)
}

.cd-main__content p {
    font-family: Merriweather, serif;
    font-family: var(--font-secondary);
    color: hsl(151, 13%, 85.8%);
    color: hsl(var(--cd-color-2-h), var(--cd-color-2-s), calc(var(--cd-color-2-l)*1.3))
}

.cd-article-link {
    font-family: 'Open Sans', sans-serif;
    font-family: var(--font-primary);
    color: #243141;
    color: var(--cd-color-1);
    font-size: .83333em;
    font-size: var(--text-sm);
    transition: opacity .2s
}

.cd-article-link:hover {
    opacity: .8
}

.four_boxes_main {
    /*background-image:url(../images/ucohome/mobile_app_float_back.png);*/
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 50px;
    /*background-color:#eef3f7;*/
}

.banner_mobile_app_main {
    background-image: url(../images/ucohome/mobile_app_banner.png);
    background-repeat: no-repeat;
    min-height: 810px;
    z-index: 3;
    background-size: cover;
    background-color: #eef3f7
}

.banner_mobile_app {
    padding: 200px 0 0 100px
}

.banner_mobile_app h3 {
    font-family: fantasy;
    font-size: 58px;
    color: #fff;
    font-weight: 100;
    letter-spacing: 13px
}

.banner_mobile_app h3::after {
    content: "";
    display: block;
    position: absolute;
    border-top: 3px solid #03bfff;
    width: 460px;
    margin-top: 10px
}

.banner_mobile_app h1 {
    font-family: beyonce;
    font-size: 35px;
    color: #fff;
    padding-left: 7px;
    letter-spacing: 14px
}

.banner_mobile_app p {
    font-family: beyonce;
    font-size: 35px;
    color: #fff;
    padding-left: 7px;
    letter-spacing: 14px
}

.banner_mobile_app h2 {
    font-family: cursive;
    font-size: 48px;
    color: #fff;
    letter-spacing: 3px;
    line-height: 20px;
    letter-spacing: 14px
}

.banner_mobile_app h4 {
    color: #f0f8ff;
    font-size: 19px;
    font-family: lato;
    font-weight: 100;
    padding-top: 10px;
    margin-bottom: 40px
}

.mobile_app_banner_btn {
    margin-top: 40px;
    font-size: 16px;
    font-weight: 300;
    color: #edeaea;
    border: 1px solid #311b74;
    border-radius: 25px;
    background-color: transparent;
    padding: 12px 40px;
    background: linear-gradient(to right, #e5422b 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all .3s ease-out
}

.mobile_app_banner_btn:hover {
    background-position: left bottom;
    border: 1px solid #e5422b
}

.home_skills_btn {
    margin-top: 40px;
    font-size: 16px;
    font-weight: 300;
    color: #edeaea;
    border: 1px solid #fff;
    border-radius: 25px;
    background-color: transparent;
    padding: 12px 40px;
    background: linear-gradient(to right, #e5422b 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all .3s ease-out
}

.home_skills_btn:hover {
    background-position: left bottom;
    border: 1px solid #fff;
    color: #fff
}

.four_boxes {
    padding-left: 40px
}

.box1 {
    width: 260px;
    height: 230px;
    color: #3f3b3c;
    border-radius: 6px;
    border: 1px solid #fff;
    background-color: #fff;
    box-shadow: 3px 3px 15px -5px;
    margin-bottom: 30px;
    padding: 20px;
    font-size: 18px;
    transition: transform 1s;
    transform: rotate(8deg)
}

.box1:hover {
    width: 260px;
    height: 230px;
    color: #3f3b3c;
    border-radius: 6px;
    border: 1px solid #fff;
    background-color: #fff;
    box-shadow: 3px 3px 15px -5px;
    margin-bottom: 30px;
    padding: 20px;
    font-size: 18px;
    transition: transform 1s;
    transform: rotate(-8deg)
}

.box1 img {
    transition: transform 1s
}

.box1 img:hover {
    transform: scale(1.1);
    transform: rotate(-15deg)
}

.box {
    width: 260px;
    height: 230px;
    color: #3f3b3c;
    border-radius: 6px;
    border: 1px solid #fff;
    background-color: #fff;
    box-shadow: 3px 3px 15px -5px;
    margin-bottom: 30px;
    padding: 20px;
    font-size: 18px;
    transition: transform 1s
}

.box:hover {
    transform: rotate(15deg)
}

.box img {
    transition: transform 1s
}

.box img:hover {
    transform: scale(1.1);
    transform: rotate(-15deg)
}

.boxes {
    margin-top: 50px
}

.mobile_app_floating_back {
    position: absolute;
    top: 600px;
    left: 0;
    min-height: 752px
}

.four_boxes_title {
    font-size: 30px;
    color: #ff0000;
    font-family: proxima_nova_alt_rgregular;
    margin: 0px;
}

.four_boxes_para {
    font-size: 20px;
    line-height: 1.6;
    text-align: justify;
    padding-top: 15px;
    font-family: proxima_nova_alt_rgregular;
    color: #3b444b !important;
    font-style: normal;
    font-variant-ligatures: normal;
    font-variant-caps: normal;
    font-variant-numeric: normal;
    font-variant-east-asian: normal;
    font-stretch: normal;
    letter-spacing: 1px;
    font-weight: 400;
    /*
            padding-bottom: 20px;*/
    padding-right: 10px !important;
}

.four_boxes_para_sec1 {
    font-size: 20px;
    line-height: 1.6;
    text-align: justify;
    padding-top: 15px;
    font-family: proxima_nova_alt_rgregular;
    color: #3b444b !important;
    font-style: normal;
    font-variant-ligatures: normal;
    font-variant-caps: normal;
    font-variant-numeric: normal;
    font-variant-east-asian: normal;
    font-stretch: normal;
    letter-spacing: 1px;
    font-weight: 400;
    /*padding-right:10px;*/
}

.mobile_app_btn {
    font-size: 16px;
    font-weight: 300;
    color: #07121e;
    border: 1px solid #87898d;
    border-radius: 25px;
    background-color: transparent;
    padding: 12px 40px;
    background: linear-gradient(to right, #ea2a0f 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all .3s ease-out
}

.mobile_app_btn:hover {
    background-position: left bottom;
    color: #fff
}

.four_boxes_content {
    /*padding-top:100px;*/
    /*padding-left:60px;*/
    padding-top: 40px;
    padding-left: 75px;
    padding-right: 75px;
    padding-bottom: 30px;
}

.mobile_app_sec1 {
    background-image: url(../images/ucohome/mobile_app_sec1_back.jpg);
    background-repeat: no-repeat;
    /*padding-top:40px;*/
}

.mobile_app_sec2 {
    background-image: url(../images/ucohome/mobile_app_sec2_back.jpg);
    background-repeat: no-repeat;
    /*padding-top:80px;*/
}

/*.mobile_app_sec3{padding-top:10px}*/

/*.mobile_app_sec4{padding-top:10px}*/

.mobile_app_sec2_img {
    padding-left: 85px
}

.mobile_app_sec1_content {
    padding-top: 60px;
    padding-left: 90px;
}

.four_boxes_sec2_content {
    padding-top: 60px;
    padding-left: 16px;
    padding-right: 102px;
}

.banner_customer_support_main {
    background-image: url(../images/ucohome/customer_support_banner.jpg);
    background-repeat: no-repeat;
    min-height: 650px;
    z-index: 3;
    width: 100%;
    background-size: cover
}

.customer_support_sec2 {
    padding: 50px 0
}

.customer_support_sec3_title {
    font-size: 36px;
    color: #07121e;
    font-family: clear sans;
    font-weight: 500;
    padding-bottom: 30px
}

.customer_support_sec3_title {
    font-size: 36px;
    color: #07121e;
    font-family: clear sans;
    font-weight: 500;
    padding-bottom: 30px
}

.testimonials_section3_points_title {
    padding-top: 50px;
    padding-left: 10%;
    padding-right: 5%
}

.testimonials_section3_points_title h1 {
    font-family: clear sans;
    font-size: 24px;
    font-weight: 500;
    color: #07121e;
    padding-left: 50px
}

.testimonials_section3_points_title h1::before {
    width: 13px;
    height: 13px;
    background-color: #000841;
    content: "";
    display: table-cell;
    position: absolute;
    margin-top: 8px;
    margin-left: -25px
}

.testimonials_section3_points_title p {
    font-family: clear sans;
    font-size: 16px;
    font-weight: 500;
    color: #7d7d7d;
    padding-left: 50px
}

.testimonials_section3_points_title ul li {
    padding-bottom: 10px
}

.ending_customer_support {
    color: #fff;
    padding-top: 20px;
    padding-bottom: 30px
}

.testimonials_section3_points_title h3 {
    font-size: 16px;
    padding-bottom: 20px
}

.banner_live_chat_main {
    background-image: url(../images/ucohome/live_chat_banner.jpg);
    background-repeat: no-repeat;
    min-height: 650px;
    z-index: 3;
    width: 100%;
    background-size: cover
}

.support {
    padding: 200px 0 0 100px
}

.support h4 {
    color: #f0f8ff;
    font-size: 19px;
    font-family: lato;
    font-weight: 100;
    padding-top: 10px;
    padding-bottom: 40px
}

.support h3 {
    font-family: monospace;
    font-size: 40px;
    color: #fff;
    font-weight: 100;
    letter-spacing: 2px;
    padding-bottom: 12px
}

.support h3::after {
    content: "";
    display: block;
    position: absolute;
    border-top: 3px solid #03bfff;
    width: 460px;
    margin-top: 10px
}

.support h2 {
    font-family: monospace;
    font-size: 30px;
    color: #fff;
    font-weight: 100;
    letter-spacing: 2px
}

.support h2 img {
    width: 35px;
    height: 38px
}

.support_banner_btn {
    margin-top: 40px;
    font-size: 16px;
    font-weight: 300;
    color: #edeaea;
    border: 1px solid #311b74;
    border-radius: 25px;
    background-color: transparent;
    padding: 12px 40px;
    background: linear-gradient(to right, #e5422b 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all .3s ease-out
}

.support_banner_btn:hover {
    background-position: left bottom;
    border: 1px solid #e5422b
}

.banner_server_support_main {
    background-image: url(../images/ucohome/server_support_banner.jpg);
    background-repeat: no-repeat;
    min-height: 685px;
    z-index: 3;
    width: 100%;
    background-size: cover
}

.banner_server_support {
    padding: 15% 55% 0 8%
}

.banner_server_support h3 {
    font-family: lato;
    font-weight: 800;
    font-size: 50px;
    color: #fff;
    text-transform: uppercase
}

.banner_server_support h4 {
    font-family: lato;
    font-weight: 400;
    font-size: 18px;
    line-height: 29px;
    color: #fff;
    padding-bottom: 40px
}

.server_support_sec2_content {
    padding-top: 20px;
    padding-left: 15%
}

.server_support_sec2_para {
    font-family: clear sans;
    font-weight: 500;
    color: #07121e;
    font-size: 17px;
    padding-top: 20px;
    line-height: 30px
}

.server_support_sec2_title {
    padding-top: 20px;
    font-family: lato;
    font-size: 38px;
    color: #07121e;
    font-weight: 700
}

.banner_iot_main {
    background-image: url(../images/ucohome/iot_banner.jpg);
    background-repeat: no-repeat;
    min-height: 600px;
    background-color: #151759;
    background-size: cover
}

.banner_iot {
    padding: 2% 0 3% 5%;
    text-align: left;
    margin: 10% auto 0 auto
}

.banner_iot h3 {
    color: #fff;
    font-family: cursive;
    font-size: 48px;
    letter-spacing: 2px;
    text-shadow: 0 0 50px #000
}

.banner_iot h4 {
    width: 44%;
    color: #fff;
    font-family: lato;
    font-size: 26px;
    text-shadow: 0 0 50px #000;
    font-weight: 100;
    letter-spacing: 4px;
    padding-top: 15px;
    padding-bottom: 40px
}

.iot_banner_btn {
    margin-top: 30px;
    font-size: 16px;
    font-weight: 300;
    color: #edeaea;
    border: 1px solid #e5422b;
    border-radius: 25px;
    background-color: transparent;
    padding: 12px 40px;
    background: linear-gradient(to right, #e5422b 0, transparent 0);
    background-size: 200% 100%;
    box-shadow: 0 0 50px #4a4a4a;
    background-position: right bottom;
    transition: all .3s ease-out
}

.iot_banner_btn:hover {
    background: linear-gradient(to right, #e5422b 100%, transparent 100%)
}

.iot_sec2 {
    text-align: center;
    width: 50%;
    margin: 5% auto 0
}

.iot_sec2 h1 {
    font-family: lato;
    font-size: 90px;
    font-weight: 900;
    color: #494141
}

.iot_sec2 h2 {
    font-family: lato;
    font-size: 100px;
    font-weight: 900;
    color: #de9f8c;
    line-height: 100px
}

.brown {
    color: #494141
}

.v_line {
    background-color: rgba(26, 26, 26, .5);
    min-height: 150px;
    width: 2px;
    margin: 0 auto
}

.iot_sec4 h1 {
    color: #191919;
    font-family: lato;
    font-size: 65px;
    font-weight: 900;
    padding: 5%
}

.iot_sec4 p {
    color: #191919;
    font-family: lato;
    font-size: 18px;
    font-weight: 400;
    padding-left: 5%
}

.iot_sec4 img {
    box-shadow: 0 0 49px #989898;
    width: 100%;
    background-size: cover
}

.iot_sec4_arrow img {
    box-shadow: none;
    width: auto;
    padding-left: 5%
}

.iot_sec5 {
    margin: 8% auto
}

.iot_sec5 h1 {
    color: #191919;
    font-family: lato;
    font-size: 65px;
    font-weight: 900
}

.iot_sec5 p {
    color: #191919;
    font-family: lato;
    font-size: 24px;
    font-weight: 500
}

.iot_sec5_box1,
.iot_sec5_box2,
.iot_sec5_box3,
.iot_sec5_box4,
.iot_sec5_box5,
.iot_sec5_box6 {
    padding-bottom: 100px;
    padding: 0;
    font-size: 24px;
    text-transform: uppercase;
    color: #fff
}

.iot_sec5_box1 h1,
.iot_sec5_box2 h1,
.iot_sec5_box3 h1,
.iot_sec5_box4 h1,
.iot_sec5_box5 h1,
.iot_sec5_box6 h1 {
    font-family: clear sans;
    font-size: 20px;
    text-transform: capitalize;
    color: #fff;
    text-align: left;
    padding-left: 25px;
    margin-top: 10px;
    padding-bottom: 0;
    margin-bottom: 0
}

.iot_sec5_imgbox {
    width: 96%
}

.iot_sec5_box1 {
    background-color: #000841;
    margin-right: 2%;
    margin-bottom: 2%;
    width: 32%;
    margin-top: 2%
}

.iot_sec5_box2 {
    background-color: #293846;
    margin-right: 2%;
    margin-bottom: 2%;
    width: 32%;
    margin-top: 2%
}

.iot_sec5_box3 {
    background-color: #1e1a34;
    margin-bottom: 2%;
    width: 32%;
    margin-top: 2%
}

.iot_sec5_box4 {
    background-color: #1e1a34;
    margin-right: 2%;
    margin-bottom: 2%;
    width: 32%
}

.iot_sec5_box5 {
    background-color: #333035;
    margin-right: 2%;
    margin-bottom: 2%;
    width: 32%
}

.iot_sec5_box6 {
    background-color: #28b29a;
    margin-bottom: 2%;
    width: 32%
}

.iot_sec5_imgbox img {
    width: 100%;
    background-size: cover
}

.h_line {
    width: 15%;
    height: 2px;
    background-color: #fff;
    margin-left: 25px;
    margin-top: 10px;
    margin-bottom: 10px
}

.banner_services_main {
    background-color: #161717
}

.banner_services {
    padding: 2% 0 7% 0;
    width: 50%;
    text-align: center;
    margin: 13% auto 0 auto
}

.banner_services h5 {
    color: #fff;
    font-family: clear sans;
    font-size: 70px
}

.banner_services h4 {
    color: #909090;
    font-family: clear sans;
    font-size: 22px;
    font-weight: 400;
    line-height: 34px
}

.logo_brand {
    position: absolute;
    top: 5.5%;
    right: 27%;
    z-index: 9;
    opacity: .05
}

.sec2_services {
    padding: 0 50px 100px;
    background-color: #161717
}

.services_box1 {
    background-color: #00a2e2;
    text-align: center;
    border-radius: 8px;
    color: #fff;
    padding: 40px 30px;
    transition: 1s;
    min-height: 370px
}

.services_box2 {
    background-color: #7f4187;
    text-align: center;
    border-radius: 8px;
    color: #fff;
    padding: 40px 30px;
    margin-top: 50px;
    transition: 1s;
    min-height: 370px
}

.services_box3 {
    background-color: #ffad02;
    text-align: center;
    border-radius: 8px;
    color: #fff;
    padding: 40px 30px;
    transition: 1s;
    min-height: 370px
}

.services_box4 {
    background-color: #00bc87;
    text-align: center;
    border-radius: 8px;
    color: #fff;
    padding: 40px 30px;
    margin-top: 50px;
    transition: 1s;
    min-height: 370px
}

.services_box5 {
    background-color: #e5422b;
    text-align: center;
    border-radius: 8px;
    color: #fff;
    padding: 40px 30px;
    transition: 1s;
    min-height: 370px
}

.services_box6 {
    background-color: #fda727;
    text-align: center;
    border-radius: 8px;
    color: #fff;
    padding: 40px 30px;
    margin-top: 50px;
    transition: 1s;
    min-height: 370px
}

.services_box7 {
    background-color: #909090;
    text-align: center;
    border-radius: 8px;
    color: #fff;
    padding: 40px 30px;
    transition: 1s;
    min-height: 370px
}

.services_box8 {
    background-color: #a94442;
    text-align: center;
    border-radius: 8px;
    color: #fff;
    padding: 40px 30px;
    margin-top: 50px;
    transition: 1s;
    min-height: 370px
}

.services_box9 {
    background-color: #333;
    text-align: center;
    border-radius: 8px;
    color: #fff;
    padding: 40px 30px;
    transition: 1s;
    min-height: 370px
}

.services_box10 {
    background-color: #009688;
    text-align: center;
    border-radius: 8px;
    color: #fff;
    padding: 40px 30px;
    margin-top: 50px;
    transition: 1s;
    min-height: 370px
}

.services_box11 {
    background-color: #72c180;
    text-align: center;
    border-radius: 8px;
    color: #fff;
    padding: 40px 30px;
    transition: 1s;
    min-height: 370px
}

.services_box12 {
    background-color: #4e8896;
    text-align: center;
    border-radius: 8px;
    color: #fff;
    padding: 40px 30px;
    margin-top: 50px;
    transition: 1s;
    min-height: 370px
}

.services_box10:hover,
.services_box11:hover,
.services_box12:hover,
.services_box1:hover,
.services_box2:hover,
.services_box3:hover,
.services_box4:hover,
.services_box5:hover,
.services_box6:hover,
.services_box7:hover,
.services_box8:hover,
.services_box9:hover {
    background-color: #1b1c1c
}

.services_box1 h2,
.services_box10 h2,
.services_box11 h2,
.services_box12 h2,
.services_box2 h2,
.services_box3 h2,
.services_box4 h2,
.services_box5 h2,
.services_box6 h2,
.services_box7 h2,
.services_box8 h2,
.services_box9 h2 {
    font-family: lato;
    font-weight: 600;
    font-size: 26px;
    color: #fff
}

.services_box1 p,
.services_box10 p,
.services_box11 p,
.services_box12 p,
.services_box2 p,
.services_box3 p,
.services_box4 p,
.services_box5 p,
.services_box6 p,
.services_box7 p,
.services_box8 p,
.services_box9 p {
    font-family: lato;
    font-weight: 500;
    font-size: 18px;
    line-height: 25px;
    color: #fff;
    padding-top: 10px
}

.services_icon {
    text-align: center;
    margin: 0 auto;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #121212;
    line-height: 100px
}

.services_box_btn {
    display: none
}

.services_box10:hover h2,
.services_box11:hover h2,
.services_box12:hover h2,
.services_box1:hover h2,
.services_box2:hover h2,
.services_box3:hover h2,
.services_box4:hover h2,
.services_box5:hover h2,
.services_box6:hover h2,
.services_box7:hover h2,
.services_box8:hover h2,
.services_box9:hover h2 {
    font-weight: 600;
    font-size: 26px;
    color: #fff
}

.services_box10:hover p,
.services_box11:hover p,
.services_box12:hover p,
.services_box1:hover p,
.services_box2:hover p,
.services_box3:hover p,
.services_box4:hover p,
.services_box5:hover p,
.services_box6:hover p,
.services_box7:hover p,
.services_box8:hover p,
.services_box9:hover p {
    color: #fff
}

.services_box10:hover .services_icon,
.services_box11:hover .services_icon,
.services_box12:hover .services_icon,
.services_box1:hover .services_icon,
.services_box2:hover .services_icon,
.services_box3:hover .services_icon,
.services_box4:hover .services_icon,
.services_box5:hover .services_icon,
.services_box6:hover .services_icon,
.services_box7:hover .services_icon,
.services_box8:hover .services_icon,
.services_box9:hover .services_icon {
    background-color: transparent;
    border: 3px dotted rgba(29, 29, 29, .1);
    line-height: 95px
}

.chatbot_integrations_icons {
    padding-top: 50px
}

.banner_chat_bot_main {
    background-image: url(../images/ucohome/chat_bot_banner.jpg);
    background-repeat: no-repeat;
    min-height: 650px;
    z-index: 3;
    width: 100%;
    background-size: cover
}

.banner_chat_bot {
    padding: 200px 0 0 100px
}

.banner_chat_bot h3 {
    font-family: raleway;
    font-size: 90px;
    color: #fff;
    font-weight: 600;
    letter-spacing: 5px
}

.banner_chat_bot h4 {
    font-family: raleway;
    font-size: 18px;
    color: #fff;
    font-weight: 300;
    width: 40%;
    line-height: 28px;
    padding-bottom: 40px
}

.chat_bot_section2_title {
    font-family: lato;
    font-weight: 800;
    font-size: 40px;
    color: #101010;
    text-align: right;
    padding-right: 30%;
    letter-spacing: 1px
}

.chat_bot_section2_para {
    text-align: right;
    padding-right: 30%;
    font-family: clear sans;
    font-weight: 500;
    color: #07121e;
    font-size: 20px;
    padding-top: 20px;
    margin-bottom: 30px;
    line-height: 28px
}

.chat_bot_section2_content {
    padding-top: 100px
}

.chat_bot_btn {
    margin-right: 30%;
    float: right;
    font-size: 16px;
    font-weight: 300;
    color: #07121e;
    border: 1px solid #87898d;
    border-radius: 25px;
    background-color: transparent;
    padding: 12px 40px;
    display: block;
    background: linear-gradient(to right, #ea2a0f 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all .3s ease-out
}

.chat_bot_btn:hover {
    background-position: left bottom;
    border: 1px solid #e5422b
}

.chat_bot_section3 {
    background-color: #000841;
    background-repeat: no-repeat;
    padding-top: 80px;
    margin-top: 80px
}

.chat_bot_section3_content {
    padding-top: 90px;
    padding-left: 10%
}

.chat_bot_section3_title {
    font-family: clear sans;
    font-weight: 500;
    font-size: 40px;
    color: #fff;
    letter-spacing: 1px
}

.chat_bot_section3_para {
    font-family: clear sans;
    font-weight: 400;
    color: #fff;
    font-size: 20px;
    padding-right: 25px;
    padding-top: 20px;
    margin-bottom: 30px;
    line-height: 29px
}

.chat_bot_red_btn {
    font-size: 16px;
    font-weight: 300;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 25px;
    padding: 12px 40px;
    background: linear-gradient(to right, #fff 50%, #ea2a0f 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all .3s ease-out
}

.chat_bot_red_btn:hover {
    background-position: left bottom;
    color: #1f1f1f
}

.chat_bot_integrations_title {
    font-family: clear sans;
    font-size: 50px;
    letter-spacing: 2px;
    color: #fff
}

.chat_bot_integrations_para {
    font-family: clear sans;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .5px;
    color: #fff
}

.chat_bot_integrations {
    padding: 50px 0 0;
    background-color: #f4f4fd;
    background-image: url(../images/ucohome/skills-bg.jpg)
}

.chat_bot_integrations .ai_we_offer_techimg {
    margin-top: 50px
}

.chat_bot_ending_title {
    font-size: 22px;
    color: #fff;
    font-family: lato;
    font-weight: 500
}

.chat_bot_ending_subtitle {
    font-size: 100px;
    color: #fff;
    font-family: lato;
    font-weight: 500;
    transition: 1s
}

.chat_bot_ending_subtitle:hover {
    color: #f6b138
}

.four_boxes_title_ai {
    font-size: 45px;
    color: #333;
    font-family: fantasy;
    letter-spacing: 1px
}

.four_boxes_para_ai {
    font-family: alef;
    font-weight: 500;
    color: #3a3a3a;
    font-size: 18px;
    line-height: 30px;
    padding-right: 60px;
    padding-top: 20px;
    margin-bottom: 30px
}

.ai_we_offer_main {
    padding-top: 50px;
    background-color: #020940;
    margin-top: 100px
}

.ai_we_offer_main h1 {
    color: #fff;
    text-align: center;
    padding: 50px 0
}

.ai_we_offer_techimg {
    border-right: 1px solid #fff;
    text-align: center;
    margin-bottom: 100px
}

.ai_we_offer_quote {
    text-align: center;
    width: 72%;
    margin: 0 auto;
    padding: 50px 0
}

.ai_we_offer_quote h2 {
    font-family: "Playfair Display", serif;
    font-size: 36px;
    line-height: 50px;
    font-weight: 600;
    background-size: 200%;
    background-image: none;
    background-image: linear-gradient(45deg, #020940 0, #020940 35%, #2d2a2b 66%, #00c9d3 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    animation: glow 9s linear infinite
}

.ai_we_offer_quote h3 {
    font-size: 16px;
    color: #848484;
    font-weight: 100
}

.ai_we_offer p {
    padding-bottom: 10px;
    font-size: 18px
}

.ai_we_offer h1 {
    font-size: 45px;
    font-family: fantasy;
    font-weight: 600;
    padding-top: 30px
}

.ai1,
.ai2,
.ai3,
.ai4,
.ai5,
.ai6,
.ai7,
.ai8 {
    width: 100%;
    height: 300px;
    margin-top: 5%;
    background-position: center bottom;
    background-size: cover;
    transform: scale(1);
    transition: all ease-in-out .5s;
    box-shadow: 10px 10px 20px black;
}

.common_ai {
    padding: 12px;
    margin: 0
}

.ai1 {
    background-image: url(../images/ucohome/ai1.jpg);
    transition: 1s;
    animation: infinite ease-in-out
}

.ai2 {
    background-image: url(../images/ucohome/ai2.jpg)
}

.ai3 {
    background-image: url(../images/ucohome/ai3.jpg)
}

.ai4 {
    background-image: url(../images/ucohome/ai4.jpg)
}

.ai5 {
    background-image: url(../images/ucohome/ai5.jpg)
}

.ai6 {
    background-image: url(../images/ucohome/ai6.jpg)
}

.ai7 {
    background-image: url(../images/ucohome/ai7.jpg)
}

.ai8 {
    background-image: url(../images/ucohome/ai8.jpg)
}

.ai_we_offer_main_ai {
    width: 90%;
    padding-top: 60px;
    text-align: center;
    margin: 0 auto
}

.ai_we_offer_main_ai h1 {
    padding-bottom: 20px;
    font-size: 45px;
    font-family: fantasy;
    letter-spacing: 2px
}

.four_boxes_main_ai {
    background-image: url(../images/ucohome/mobile_app_float_back.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 50px;
    background-color: #eef3f7;
    padding-top: 80px
}

.four_boxes_content_ai {
    padding-top: 50px;
    padding-left: 150px
}

.banner_artificial_intelligence {
    padding-left: 80px;
    position: relative;
    top: 250px
}

.banner_artificial_intelligence_main {
    background-image: url(../images/ucohome/banner_artificial_intelligence1.gif);
    background-repeat: no-repeat;
    min-height: 710px;
    background-color: #151759;
    background-size: cover;
    width: 100%
}

.banner_ux_desig_main {
    background-image: url(../images/ucohome/banner_ux_design.gif);
    background-repeat: no-repeat;
    min-height: 710px;
    background-color: #151759;
    margin-bottom: 100px
}

.artificial_title {
    font-family: robo;
    font-size: 75px;
    color: #fff !important;
    letter-spacing: 4px
}

.intelligence_title {
    font-family: Beyonce;
    font-size: 70px;
    color: #fff
}

.ai_btn {
    font-size: 16px;
    font-weight: 300;
    text-align: center;
    color: #edeaea;
    border: 1px solid #311b74;
    border-radius: 25px;
    background-color: transparent;
    padding: 12px 40px;
    display: block;
    background: linear-gradient(to right, #e5422b 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all .3s ease-out;
    width: 200px
}

.ai_btn:hover {
    background-position: left bottom;
    border: 1px solid #e5422b
}

.some_words {
    padding: 0 50px;
    padding-bottom: 10px;
    text-align: center
}

.some_words_title {
    color: #453e3f;
    font-family: lato;
    font-size: 45px
}

video {
    pointer-events: none
}

.orange {
    color: #e5422b
}

.some_words p {
    font-size: 16px;
    color: #453e3f;
    font-weight: 600;
    padding-top: 30px
}

.ai_we_offer_main {
    background-image: url(../images/ucohome/bg_artificial_intelligence.jpg)
}

.ai_we_offer {
    padding-bottom: 30px
}

.ai_we_offer h1 {
    color: #fff;
    font-size: 45px;
    font-family: sans-serif
}

.ai_we_offer h1::before {
    content: "";
    display: block;
    position: relative;
    border-left: 3px solid #1c1775;
    width: 3px;
    height: 60px;
    box-shadow: 1px 5px 10px #1c1775;
    margin-bottom: 20px
}

.ai_we_offer p {
    color: #fff;
    font-size: 18px;
    font-family: lato
}

.ai_we_offer_box {
    background-color: #000;
    padding: 60px;
    margin-top: 40px;
    margin-bottom: 100px;
    box-shadow: 0 0 7px #181465
}

.ai_we_offer_box h1 {
    color: #7faab1;
    font-size: 38px;
    letter-spacing: 2px;
    font-family: Beyonce;
    font-weight: 600
}

.ai_we_offer_box h5 {
    color: #1c1775;
    font-size: 16px
}

.ai_we_offer_box p {
    color: #fff;
    font-size: 19px;
    padding-right: 35px;
    line-height: 32px;
    padding-top: 10px;
    text-align: justify
}

.ai_how_box {
    background-color: #161717;
    padding: 50px 0;
    box-shadow: 0 -5px 7px #181465;
    height: 700px
}

.ai_how_box h1 {
    color: #ff4c43;
    font-family: beyonce;
    font-size: 30px;
    letter-spacing: 2px;
    font-weight: 600;
    text-align: left
}

.ai_how_box h5 {
    color: #fff;
    font-size: 31px;
    text-align: left
}

.ai_how_box p {
    color: #919191;
    font-size: 15px;
    line-height: 24px;
    padding-top: 10px;
    text-align: center
}

.ai_sec2 {
    position: absolute;
    width: 500;
    height: 400px;
    background-size: cover;
    z-index: 999;
    left: 150px;
    top: 70px
}

.hire_benefits_main {
    background-color: #f6f6f6;
    margin-bottom: 70px;
    padding: 70px 0 50px;
    text-align: center
}

.hire_benefits_main p {
    color: #444;
    font-size: 17px;
    line-height: 26px;
    width: 85%;
    margin: 0 auto
}

.hire_benefits_heading {
    width: 92%;
    display: inline-block;
    color: #393d3e;
    font-family: lato;
    font-size: 38px;
    font-weight: 400;
    line-height: 50px;
    margin-bottom: 24px
}

.hire_benefits_main .hire_benefits {
    margin: 0 auto;
    width: 760px;
    position: relative;
    margin-top: 60px
}

.benefit_first {
    left: 40px;
    position: absolute;
    top: 10px
}

.benefit_second {
    position: absolute;
    left: -60px;
    top: 110px
}

.benefit_third {
    position: absolute;
    left: -150px;
    top: 205px
}

.benefit_fourth {
    position: absolute;
    right: 50px;
    top: 10px
}

.benefit_fifth {
    position: absolute;
    right: -50px;
    top: 110px
}

.benefit_sixth {
    position: absolute;
    right: -150px;
    top: 205px
}

.benefit_fifth h4,
.benefit_first h4,
.benefit_fourth h4,
.benefit_second h4,
.benefit_sixth h4,
.benefit_third h4 {
    float: left;
    font-size: 15px;
    font-weight: 700;
    line-height: 22px;
    color: #000;
    margin-top: 30px;
    text-align: right
}

.benefitsimg {
    max-width: 100%;
    margin-bottom: -15px
}

.right-experts-row-title h2 {
    font-family: lato;
    color: #000639;
    font-size: 30px;
    font-weight: 600
}

.right-experts {
    padding: 0 0 100px
}

.right-experts-row-title {
    margin-bottom: 50px
}

.right-experts-row-title h2 {
    color: #000639
}

.no-gutters {
    margin-right: 0;
    margin-left: 0
}

.right-experts-tech {
    text-align: left
}

.right-experts-tech img.right-experts-tech-icon {
    max-height: 53px;
    width: auto;
    margin-bottom: 10px
}

.right-experts-tech h5 {
    font-size: 18px;
    font-family: lato;
    font-weight: 600;
    color: #000639;
    margin-bottom: 45px
}

ul.find-experts-tech-list {
    float: left;
    position: relative;
    width: 100%;
    margin: 0
}

ul.find-experts-tech-list li .find-experts-icon {
    width: 24px;
    height: auto;
    margin-right: 10px
}

ul.find-experts-tech-list li {
    float: left;
    position: relative;
    width: 100%;
    margin-bottom: 30px;
    color: #3c3c3c;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    font-size: 16px;
    text-align: left;
    height: 20 px;
    line-height: 20px
}

.hourly_main {
    padding: 0 50px 130px;
    min-height: 450px;
    background-position: center 130px;
    background-repeat: no-repeat;
    background-image: url(../images/ucohome/hire_hours_back.jpg);
    background-size: cover
}

.hourly_box1 {
    background-color: #a71666;
    padding: 30px 50px;
    min-height: 450px;
    background-image: url(../images/ucohome/hours_back1.png)
}

.hourly_main h1 {
    font-size: 42px;
    font-weight: 600;
    padding-bottom: 20px;
    color: #fff
}

.hourly_main p {
    font-size: 17px;
    font-weight: 100;
    color: #fff;
    padding-bottom: 10px
}

.hourly_box2 {
    background-color: #25b195;
    padding: 30px 50px;
    min-height: 450px;
    background-image: url(../images/ucohome/hours_back2.png)
}

.hourly_box3 {
    background-color: #e4a000;
    padding: 30px 50px;
    min-height: 450px;
    background-image: url(../images/ucohome/hours_back3.png)
}

.skyblue-bg {
    padding: 50px 0 50px;
    position: relative;
    z-index: 99
}

.psd-conversion .company-percentage ul {
    list-style: none;
    margin: 0 0 30px
}

.company-percentage li:first-child {
    border: none;
    padding: 3% 2% 3% 0
}

.company-percentage li {
    font-family: clear sans;
    font-size: 18px;
    font-weight: 500;
    color: #293a3e;
    display: inline-block;
    width: 24.5%;
    padding: 2% 1% 2% 3%;
    margin: 0;
    border-left: 1px solid #d0d0d0
}

.company-percentage i.team_icon_1 {
    width: 55px;
    height: 50px;
    float: left;
    margin: 0 10px 0 0;
    background: url(../images/ucohome/hire_percentage_1.png) no-repeat
}

.company-percentage i.team_icon_2 {
    width: 55px;
    height: 50px;
    float: left;
    margin: 0 10px 0 0;
    background: url(../images/ucohome/hire_percentage_2.png) no-repeat
}

.company-percentage i.team_icon_3 {
    width: 55px;
    height: 50px;
    float: left;
    margin: 0 10px 0 0;
    background: url(../images/ucohome/hire_percentage_3.png) no-repeat
}

.company-percentage i.team_icon_4 {
    width: 55px;
    height: 50px;
    float: left;
    margin: 0 10px 0 0;
    background: url(../images/ucohome/hire_percentage_4.png) no-repeat
}

.company-percentage li span {
    font-family: clear sans;
    font-size: 27px;
    font-weight: 600
}

.grey_pattern_top {
    background-image: url(../images/ucohome/grey_pattern_top.png);
    background-repeat: no-repeat;
    min-height: 173px;
    background-size: cover
}

.grey_pattern_bottom {
    background-image: url(../images/ucohome/grey_pattern_bottom.png);
    background-repeat: no-repeat;
    min-height: 173px;
    background-size: cover
}

.banner_hire_team {
    padding: 180px 0 200px;
    background-color: #242529;
    background-image: url(../images/ucohome/hire_team_back.jpg)
}

.hire_team_title {
    font-family: lato;
    font-size: 100px;
    text-transform: uppercase;
    font-weight: 800;
    color: #fff;
    letter-spacing: 4px;
    line-height: 100px;
    background-clip: text;
    text-fill-color: transparent
}

.hire_team_title:after,
.hire_team_title:before {
    position: absolute;
    content: ''
}

.hire_team_para {
    font-family: lato;
    font-size: 24px;
    font-variant: small-caps;
    font-weight: 300;
    color: #fff;
    text-decoration: underline;
    padding-bottom: 20px
}

.hire_team_btn {
    font-size: 16px;
    font-weight: 300;
    color: #edeaea;
    border: 1px solid #311b74;
    border-radius: 25px;
    background-color: transparent;
    padding: 12px 40px;
    margin-top: 20px;
    background: linear-gradient(to right, #e5422b 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all .3s ease-out
}

.hire_team_btn:hover {
    background-position: left bottom;
    border: 1px solid #e5422b
}

.hire_dedicated {
    padding-left: 130px
}

.hire_dedicated_heading {
    font-family: lato;
    font-size: 40px;
    font-weight: 900;
    text-transform: uppercase
}

.hire_dedicated_para {
    padding-top: 20px;
    font-family: lato;
    font-size: 25px;
    line-height: 30px;
    font-weight: 600;
    color: #000;
    width: 85%
}

.Technologies {
    text-align: center;
    background-color: #242529;
    width: 100%;
    padding: 30px 0
}

.Technologies_title {
    font-family: lato;
    font-size: 40px;
    color: #fff;
    font-weight: 900;
    text-transform: uppercase
}

.Technologies_para {
    padding-top: 20px;
    font-family: lato;
    font-size: 17px;
    color: #8e8e8e;
    letter-spacing: 1px;
    line-height: 30px;
    font-weight: 400
}

.Technologies_para2 {
    position: absolute;
    left: -90px;
    padding-top: 20px;
    font-family: lato;
    font-size: 15px;
    color: #8e8e8e;
    letter-spacing: 1px;
    line-height: 30px;
    font-weight: 400;
    padding-bottom: 10px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease
}

.Technologies_table1:hover .Technologies_para2 {
    left: 30px
}

.Technologies_table {
    background-color: #242529;
    padding: 0 15%
}

.Technologies_table1 {
    border: 1px solid #35363b;
    padding: 30px;
    min-height: 230px;
    overflow: hidden
}

.Technologies_table1:hover .Technologies_icon {
    width: 200px;
    height: 150px
}

.Technologies_heading {
    font-size: 30px;
    color: #fff;
    font-weight: 400
}

.Technologies_icon {
    position: absolute;
    bottom: 5px;
    right: 5px;
    height: 100px;
    width: 150px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease
}

.Technologies_icon:hover {
    width: 220px;
    height: 147px
}

.Technologies_bottom {
    padding-top: 100px;
    background-color: #242529;
    padding-left: 80px;
    padding-bottom: 150px
}

.Technologies_bottom_title {
    font-family: lato;
    font-size: 60px;
    color: #fff;
    font-weight: 900
}

.Technologies_bottom_para {
    padding-top: 20px;
    font-family: lato;
    font-size: 18px;
    color: #fff;
    letter-spacing: 2px;
    line-height: 35px;
    font-weight: 400;
    width: 60%
}

.Technologies_bottom_para2 {
    padding-top: 50px;
    font-family: lato;
    font-size: 15px;
    letter-spacing: 2px;
    line-height: 35px;
    font-weight: 400;
    color: #8a8a8a
}

.popup_box {
    width: 40%;
    margin: 0 auto;
    background: rgba(255, 255, 255, .2);
    padding: 35px;
    border: 2px solid #fff;
    border-radius: 20px/50px;
    background-clip: padding-box;
    text-align: center
}

.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .7);
    transition: opacity .5s;
    visibility: hidden;
    opacity: 0;
    z-index: 999
}

.overlay:target {
    visibility: visible;
    opacity: 1
}

.popup h2 {
    margin-top: 0;
    color: #333;
    font-family: Tahoma, Arial, sans-serif
}

.popup .close {
    position: absolute;
    top: 0;
    right: 2%;
    transition: all .2s;
    font-size: 50px;
    font-weight: 700;
    text-decoration: none;
    color: #333;
    z-index: 999999
}

.popup .close:hover {
    color: #06d85f
}

.popup .content {
    max-height: 30%;
    overflow: auto
}

.popup {
    width: 700px;
    height: 550px;
    background-color: #f5f5f5;
    margin: 0 auto;
    border-radius: 5px;
    position: relative;
    top: 6%;
    padding-top: 10px
}

@media screen and (max-width:700px) {
    .popup_box {
        width: 70%
    }
    .popup {
        width: 70%
    }
}

.banner_about {
    background-image: url(../images/ucohome/banner_about.jpg);
    background-repeat: no-repeat;
    min-height: 670px;
    background-color: #151759;
    transform: skewy(-2deg);
    background-size: cover
}

.dark_banner_blue {
    background-color: #151759
}

.about_banner_btn {
    background-color: #e22b13;
    padding: 10px 18px;
    border: none;
    color: #fff;
    font-family: clear sans;
    font-size: 16px;
    font-weight: 400;
    position: absolute;
    bottom: 27%;
    right: 39%;
    z-index: 999
}

.about_banner_btn:hover {
    background-color: #f34029;
    padding: 10px 18px;
    border: none;
    color: #fff;
    font-family: clear sans;
    font-size: 16px;
    font-weight: 400;
    position: absolute;
    bottom: 27%;
    right: 39%;
    z-index: 999
}

.banner_about_main {
    min-height: 718px;
    background-color: #151759;
    transform: skewy(2deg)
}

.floating {
    animation-name: floating;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    position: absolute;
    top: 150px;
    left: 7%;
    z-index: 998
}

@keyframes floating {
    from {
        transform: translate(0, 0)
    }
    65% {
        transform: translate(0, 15px)
    }
    to {
        transform: translate(0, 0)
    }
}

.video_about_main {
    background-image: url(../images/ucohome/video_about.jpg);
    min-height: 650px;
    background-color: grey;
    transform: skewy(2deg)
}

.video_about {
    transform: skewy(-2deg)
}

.grey {
    background-color: #474747
}

.we_are {
    padding: 150px;
    margin: 0 150px;
    font-size: 95px;
    color: #fff;
    font-weight: bolder;
    line-height: 110px
}

.video_about {
    transform: skewy(-2deg)
}

.white_space {
    min-height: 50px;
    background-color: #fff;
    transform: skewy(-2deg);
    position: relative;
    top: -28px
}

.white_space_main {
    min-height: 50px;
    background-color: #fff;
    position: relative;
    top: -28px
}

.team_title {
    text-transform: uppercase;
    font-size: 120px;
    padding-left: 80px;
    padding-right: 1000px;
    padding-bottom: 80px
}

.stats {
    min-height: 400px
}

.stats_grey {
    padding-top: 150px;
    padding-bottom: 150px;
    vertical-align: middle;
    background-color: #e5422b
}

.stats_blue {
    padding-top: 150px;
    padding-bottom: 150px;
    vertical-align: middle;
    background-color: #151759
}

.stats_white {
    padding-top: 150px;
    padding-bottom: 150px;
    vertical-align: middle;
    background-color: #fff
}

.stats_title {
    color: #e5422b;
    font-size: 110px;
    font-weight: 600
}

.stats_title_grey {
    color: #fff;
    font-size: 110px;
    font-weight: 600
}

.stats_title_blue {
    color: #fff;
    font-size: 110px;
    font-weight: 600
}

.stats_subtitle {
    color: #3e3e3e;
    font-size: 30px;
    font-weight: 600
}

.stats_subtitle_white {
    color: #fff;
    font-size: 30px;
    font-weight: 600
}

.pad-left-150 {
    padding-left: 150px
}

.pad-top-100 {
    padding-top: 100px
}

.journey {
    padding: 50px
}

.journey_title {
    font-size: 80px;
    color: #31313a
}

.journey_subtitle {
    font-size: 18px;
    font-weight: 600;
    color: #31313a;
    padding: 0 5px
}

.ending {
    color: #fff;
    padding-top: 50px;
    padding-bottom: 80px
}

.ending_title {
    color: #151759;
    font-size: 150px;
    font-weight: 600
}

.ending_title2 {
    color: #e5422b;
    font-size: 150px;
    font-weight: 600
}

.ending_subtitle {
    color: #3e3e3e;
    font-size: 40px;
    font-weight: 600;
    transition: .2s
}

.ending_subtitle:hover {
    color: #f7c115;
    font-size: 40px;
    font-weight: 600;
    transition: 1s;
    text-decoration: underline
}

#world {
    background: linear-gradient(#8ee4ae, #e9eba3);
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.validation_error {
    color: #d00808;
    position: relative;
    top: -50px
}

.gray_form_label {
    padding-bottom: 0;
    color: #aaaaab;
    font-size: 22px;
    font-family: lato;
    font-weight: 400
}

.gray_form_input {
    padding-bottom: 20px;
    color: #aaaaab;
    width: 80%;
    height: 55px;
    display: block;
    font-size: 20px;
    font-family: lato;
    font-weight: 400;
    letter-spacing: .4px;
    border-color: #4f5052;
    border-right: 1px solid #232427;
    border-left: 1px solid #232427;
    border-bottom: 1px solid #00c9d369;
    border-top: 1px solid #232427;
    padding: 0;
    border-radius: 0 !important;
    -webkit-appearance: none !important;
    background: 0 0;
    margin-bottom: 60px
}

textarea {
    min-height: 200px;
    border: 2px solid #c38d73;
    resize: none;
    line-height: 160%;
    padding: 30px;
    border-left: 1px solid #00c9d369 !important;
    border-right: 1px solid #00c9d369 !important;
    border-top: 1px solid #00c9d369 !important;
    margin-bottom: 20px !important
}

.gform_button {
    background: #00c9d3;
    color: #fff;
    text-align: left;
    border: none;
    padding: 20px 90px;
    font-size: 18px;
    float: right;
    transition: ease-in-out
}

.gform_button:hover {
    color: #e2bdab
}

.footer_button {
    width: 80%
}

.both_address {
    padding: 0 120px 0 90px
}

.gray_contact_form {
    background-color: #232427;
    padding: 100px 0
}

.ass {
    display: none;
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    position: relative;
    background-color: #fff;
    border-radius: 5px;
    box-s hadow: 0 0 20px #d2d2d2;
    margin-bottom: 50px
}

.ass::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    margin-left: -.5em;
    bottom: -19px;
    left: 50%;
    box-sizing: border-box;
    border: 10px solid #000;
    border-color: transparent transparent #fff #fff;
    transform-origin: 0 0;
    transform: rotate(-45deg);
    box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, .05)
}

.start_project {
    color: #232427;
    font-size: 24px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 2px
}

.start_project:hover {
    color: #ebb318;
    font-size: 24px;
    font-weight: 600;
    font-family: inherit;
    text-decoration: underline !important;
    letter-spacing: 2.5px
}

.banner_contact_main img {
    height: 600px;
    background-size: cover;
    padding-top: 72px;
    margin-left: -15px;
    width: 90%
}

.telephone a {
    color: #337ab7
}

.telephone a:hover {
    color: #f6b138
}

.banner_contact_main {
    min-height: auto;
    background-color: #fff
}

.banner_contact {
    padding: 12% 12% 0 3%;
    color: #fff;
    position: inherit;
    z-index: 1
}

.contact_title {
    font-family: var(--font-secondary);
    font-size: 44px;
    color: #232427 !important;
    font-weight: 600
}

.banner_contact p {
    font-family: var(--font-secondary);
    font-size: 21px;
    letter-spacing: 1px;
    line-height: 35px;
    color: #7e7f80 !important;
    font-weight: 500;
    margin-top: 23px;
    padding-right: 50px
}

.contact_details_main {
    background-color: #fff;
    height: 100px;
    padding: 30px 0;
    transform-origin: left top;
    transform: skewy(0);
    border-bottom: 3px solid #85dd9f
}

.contact_details {
    background-color: #33484d;
    padding: 50px 100px 100px;
    margin-top: -50px
}

.contact_sec2_title {
    font-family: "Playfair Display", serif;
    font-size: 55px;
    line-height: 68px;
    font-weight: 600;
    background-size: 200%;
    background-image: none;
    background-image: linear-gradient(45deg, #fff070 0, #fff070 35%, #00c9d3 66%, #00c9d3 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    animation: glow 9s linear infinite
}

.contact_sec2_title_hide {
    font-family: "Playfair Display", serif;
    font-size: 50px;
    line-height: 50px;
    font-weight: 600;
    padding-bottom: 20px;
    background-size: 200%;
    background-image: none;
    background-image: linear-gradient(45deg, #fff070 0, #fff070 35%, #00c9d3 66%, #00c9d3 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    animation: glow 9s linear infinite
}

.contact_sec3_title {
    font-family: "Playfair Display", serif;
    font-size: 35px;
    text-decoration: underline !important;
    margin: 0;
    font-weight: 600;
    background-size: 200%;
    text-align: center
}

.contact_sec3_title a {
    font-size: 35px;
    color: #000;
    transition: 1s
}

.contact_sec3_title a:hover {
    font-size: 35px;
    letter-spacing: 1px;
    color: #00c9d3
}

.contact_dark_grey {
    color: #fff;
    font-size: 18px;
    font-family: clear sans;
    font-weight: 500;
    margin-top: 20px;
    margin-bottom: 0
}

.contact_light_grey {
    color: #d6d6d6;
    font-size: 18px;
    font-family: clear sans;
    font-weight: 300;
    line-height: 26px;
    margin-top: 0
}

.telephone h2 {
    margin-top: 0;
    padding-bottom: 0
}

.contact_btn {
    color: #fff;
    background-color: #1d1d1d;
    padding: 11px 20px;
    border: 1px solid #343434;
    margin-top: 20px
}

.contact_map {
    margin-top: 80px;
    padding: 0 50px
}

.contact_ending {
    color: #fff;
    padding-top: 50px;
    padding-bottom: 80px;
    background-color: #111
}

.contact_ending_title {
    color: #fff;
    font-size: 150px;
    font-weight: 600
}

.contact_ending_subtitle {
    color: #b6b6b6;
    font-size: 40px;
    font-weight: 300
}

#myVideo {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    background-color: #000;
    opacity: .4
}

a:focus {
    outline: 0
}

.portfolioFilter {
    padding: 15px 0
}

.portfolioFilter a {
    font-size: 16px;
    color: #666;
    text-decoration: none;
    padding: 4px 15px;
    display: inline-block;
    font-family: lato;
    font-weight: 500
}

.portfolioFilter a.current {
    color: #df422b
}

.portfolioContainer {
    border: 1px solid #eee;
    border-radius: 3px
}

.port_img {
    overflow: hidden;
    width: 100%;
    background-color: #000
}

.port_img img {
    margin: 0;
    width: 100%;
    transition: 2s
}

.port_img img:hover {
    transform: scale(1.2);
    cursor: pointer;
    opacity: .1
}

.isotope-item {
    z-index: 2
}

.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1
}

.isotope,
.isotope .isotope-item {
    -webkit-transition-duration: .8s;
    -moz-transition-duration: .8s;
    transition-duration: .8s
}

.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width
}

.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity
}

.portfolio_title_main {
    padding-bottom: 20px
}

.portfolio_title {
    font-size: 44px;
    color: #2a2e31;
    float: left;
    font-weight: 800;
    font-family: open sans
}

.portfolio_box {
    margin: 80px 0
}

.orange {
    color: #d82010
}

.our_work_ending_title {
    font-size: 18px;
    color: #fff;
    font-family: lato;
    font-weight: 500;
    padding-bottom: 50px
}

.our_work_ending_subtitle {
    font-size: 100px;
    color: #fff;
    font-family: lato;
    font-weight: 500
}

.our_work_ending_subtitle:hover {
    text-decoration: underline !important
}

.our_work_ending {
    background-color: #01083b;
    padding: 100px 0
}

.our_work_title {
    font-family: "Playfair Display", serif;
    font-size: 85px;
    font-weight: 600;
    width: 70% color: #fff;
    background-size: 200%;
    background-image: none;
    background-image: linear-gradient(45deg, #fff070 0, #fff070 35%, #00c9d3 66%, #00c9d3 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    animation: glow 9s linear infinite
}

@keyframes glow {
    0% {
        background-position: 0 43%
    }
    50% {
        background-position: 100% 58%
    }
    100% {
        background-position: 0 43%
    }
}

.our_work_title1 {
    position: relative;
    font-family: fantasy;
    font-size: 100px;
    font-weight: 800;
    letter-spacing: 5px;
    color: #fff;
    background-size: 200%;
    background-image: none;
    background-image: linear-gradient(45deg, #fff070 0, #fff070 35%, #00c9d3 66%, #00c9d3 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    animation: glow 9s linear infinite;
    transform: scale(1.3, 1)
}

@keyframes glow {
    0% {
        background-position: 0 43%
    }
    50% {
        background-position: 100% 58%
    }
    100% {
        background-position: 0 43%
    }
}

.our_work_para {
    font-family: lato;
    font-size: 14px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff
}

.our_work_para_original {
    font-family: lato;
    font-size: 14px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff
}

.banner_our_work {
    position: relative;
    min-height: 650px;
    background-color: #000;
    padding: 180px 0 80px;
    background-image: linear-gradient(to top, #030729 20%, #01083b 80%)
}

.banner_our_work_main {
    position: relative;
    background-color: #01083b
}

@keyframes move_wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1)
    }
    50% {
        transform: translateX(-25%) translateZ(0) scaleY(.55)
    }
    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1)
    }
}

.waveWrapper {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto
}

.waveWrapperInner {
    position: absolute;
    width: 100%;
    overflow: hidden;
    height: 100%;
    bottom: -1px
}

.bgTop {
    z-index: 15;
    opacity: .5
}

.bgMiddle {
    z-index: 10;
    opacity: .75
}

.bgBottom {
    z-index: 5
}

.wave {
    position: absolute;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat no-repeat;
    background-position: 0 bottom;
    transform-origin: center bottom
}

.waveTop {
    background-size: 50% 100px
}

.waveAnimation .waveTop {
    animation: move-wave 3s;
    -webkit-animation: move-wave 3s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

.waveMiddle {
    background-size: 50% 120px
}

.waveAnimation .waveMiddle {
    animation: move_wave 10s linear infinite
}

.waveBottom {
    background-size: 50% 100px
}

.waveAnimation .waveBottom {
    animation: move_wave 15s linear infinite
}

.banner_ux_design_main {
    background-image: url(../images/ucohome/banner_ux_design.gif);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 650px;
    background-color: #151759
}

.banner_ux_design {
    padding-left: 9%;
    position: relative;
    padding-top: 27%
}

.ux_design_para {
    font-size: 18px;
    color: #fff;
    font-weight: 500;
    padding-top: 20px;
    width: 70%
}

.ux_design_take {
    font-family: lato;
    font-size: 80px;
    font-weight: lighter;
    color: #000841;
    padding-bottom: 20px;
    text-transform: uppercase;
    line-height: 85px;
    padding-right: 95px;
    text-align: center;
    padding-top: 100px
}

.bold_txt {
    font-weight: bolder
}

.ux_design_3boxes {
    background-repeat: no-repeat;
    padding: 120px 50px;
    background-size: cover
}

.ux_box1 {
    background-image: url(../images/ucohome/box1.png);
    background-repeat: no-repeat;
    float: left;
    height: 523px
}

.ux_box1:hover {
    background-image: url(../images/ucohome/box1_hover.png);
    background-repeat: no-repeat;
    float: left;
    height: 523px
}

.ux_box2 {
    background-image: url(../images/ucohome/box2.png);
    background-repeat: no-repeat;
    padding: 0 20px;
    float: left;
    height: 523px
}

.ux_box2:hover {
    background-image: url(../images/ucohome/box2_hover.png);
    background-repeat: no-repeat;
    float: left;
    height: 523px
}

.ux_box3 {
    background-image: url(../images/ucohome/box3.png);
    background-repeat: no-repeat;
    float: left;
    height: 523px
}

.ux_box3:hover {
    background-image: url(../images/ucohome/box3_hover.png);
    background-repeat: no-repeat;
    float: left;
    height: 523px
}

.ux_design_content {
    /*background-image:url(../images/ucohome/ux_desigining_content_new.jpg);*/
    background-repeat: no-repeat;
    min-height: 750px;
    background-size: cover;
}

.logo_bounce {
    position: absolute;
    top: 1545px;
    right: 195px;
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out
}

.ux_design_content_text {
    font-weight: 600;
    color: #020731;
    position: relative;
    top: 660px;
    left: 150px;
    font-size: 63px;
    text-align: left
}

.ux_design_stats {
    padding-left: 15px;
    border-left: 5px solid #0fe0b9;
    margin: 20px 0 20px
}

.ux_design_stats h1 {
    font-family: lato;
    font-weight: 400;
    font-size: 30px;
    margin: 0
}

.ux_design_stats p {
    padding-top: 10px;
    font-size: 16px;
    line-height: 18px
}

.ux_design_content_text_title {
    font-size: 70px;
    color: #020730
}

.banner_machine_main {
    background-image: url(../images/ucohome/machine_learning_back.jpg);
    background-repeat: no-repeat;
    min-height: 700px;
    z-index: 3;
    background-size: cover
}

.banner_machine {
    padding: 15% 0 0 10%
}

.banner_machine h3 {
    font-family: quantify;
    font-size: 90px;
    color: #fff;
    font-weight: 600;
    letter-spacing: 1px;
    position: relative;
    z-index: 999999
}

.banner_machine h3::after {
    content: "";
    display: block;
    position: absolute;
    border-top: 3px solid #03bfff;
    width: 60px;
    margin-top: 10px;
    margin-bottom: 10px
}

.banner_machine p {
    font-family: clear sans;
    font-size: 17px;
    color: #fff;
    font-weight: 300;
    letter-spacing: 2px;
    padding-top: 22px;
    line-height: 30px;
    padding-right: 35%;
    position: absolute;
    z-index: 999
}

.banner_machine p::after {
    content: "";
    display: block;
    border: 6px solid #e4422b;
    width: 329px;
    height: 360px;
    background-color: transparent;
    margin-top: -320px;
    margin-left: 70px
}

.machine_learning_section2 {
    background-image: url(../images/ucohome/machine_learning_section2_back.jpg);
    background-repeat: no-repeat;
    paddi ng: 80px 30px
}

.machine_learning_section2 h1 {
    font-family: clear sans;
    font-weight: 600;
    font-size: 40px;
    color: #33383d;
    letter-spacing: 1px;
    padding-bottom: 60px
}

.machine_learning_section2_box1 {
    background-color: #fff;
    text-align: left;
    padding: 50px 35px;
    margin-top: 60px;
    box-shadow: 0 0 20px #dadada;
    transition: 1s
}

.machine_learning_section2_box1:hover {
    background-color: #fff;
    text-align: left;
    padding: 50px 35px;
    margin-top: 40px;
    box-shadow: 0 0 20px #dadada;
    transform: rotate(-5deg)
}

.machine_learning_section2_box1 h1 {
    font-family: clear sans;
    font-weight: 600;
    font-size: 22px;
    color: #343434;
    padding-bottom: 12px
}

.machine_learning_section2_box1 p {
    font-family: clear sans;
    font-weight: 400;
    font-size: 15px;
    color: #9c9c9c;
    padding-bottom: 12px
}

.machine_learning_section2_box2 {
    background-color: #fff;
    text-align: left;
    padding: 50px 35px;
    box-shadow: 0 0 20px #dadada;
    transition: 1s
}

.machine_learning_section2_box2:hover {
    margin-top: 0;
    transform: rotate(5deg)
}

.machine_learning_section2_box2 h1 {
    font-family: clear sans;
    font-weight: 600;
    font-size: 22px;
    color: #343434;
    padding-bottom: 12px
}

.machine_learning_section2_box2 p {
    font-family: clear sans;
    font-weight: 400;
    font-size: 15px;
    color: #9c9c9c;
    padding-bottom: 12px
}

.machine_section3 {
    padding: 3% 7% 6%
}

.machine_section3 h1 {
    font-family: clear sans;
    color: #07121e;
    font-size: 45px
}

.machine_section3 h4 {
    line-height: 34px;
    font-family: lato;
    font-size: 22px;
    padding-right: 5%
}

.machine_section3 p {
    font-family: clear sans;
    color: #07121e;
    font-size: 16px;
    line-height: 30px;
    padding: 20px 0
}

.machine_section4 {
    padding: 6% 7% 2%;
    background-color: #f6fafe
}

.machine_section4 h1 {
    font-family: clear sans;
    color: #07121e;
    font-size: 45px
}

.machine_section4 p {
    font-family: clear sans;
    color: #07121e;
    font-size: 16px;
    line-height: 30px;
    padding: 20px 0
}

.machine_section6 {
    padding: 4% 7%
}

.machine_section6 h1 {
    font-family: clear sans;
    color: #fff;
    font-size: 45px;
    padding-top: 5%
}

.machine_section6 p {
    font-family: clear sans;
    color: #fff;
    font-size: 18px;
    line-height: 24px;
    padding: 0 0 20px
}

.blue_background {
    background-color: #00074c
}

.machine_section6_1 {
    padding: 20px;
    float: left
}

.machine_section6_1 img {
    width: 100%
}

.machine_section6_2 {
    margin-top: 40px;
    padding: 20px;
    float: left
}

.machine_section6_2 img {
    width: 100%
}

.machine_section6_2 h1 {
    text-align: center;
    font-family: clear sans;
    font-weight: 700;
    color: #fff;
    font-size: 20px
}

.machine_section6_2 p {
    text-align: center;
    font-family: clear sans;
    font-weight: 400;
    color: #fff;
    font-size: 18px;
    font-style: italic;
    padding: 0
}

.machine_section6_1 h1 {
    text-align: center;
    font-family: clear sans;
    font-weight: 700;
    color: #fff;
    font-size: 20px
}

.machine_section6_1 p {
    text-align: center;
    font-family: clear sans;
    font-weight: 400;
    color: #fff;
    font-size: 18px;
    font-style: italic;
    padding: 0
}

.banner_seo_main {
    background-image: url(../images/ucohome/seo_banner_back1.jpg);
    background-repeat: no-repeat;
    min-height: 830px;
    background-size: cover
}

.banner_seo {
    padding-top: 200px;
    padding-left: 100px
}

.banner_seo p {
    font-family: lato;
    font-weight: 300;
    font-size: 24px;
    color: #fff;
    padding-left: 10px;
    padding-bottom: 20px
}

.seo_sec2 {
    padding-right: 150px;
    padding-top: 100px;
    text-align: right
}

.seo_sec3_main {
    margin-top: 100px
}

.seo_sec3 {
    padding-left: 150px;
    padding-top: 100px;
    text-align: left
}

.seo_sec2_title {
    font-family: lato;
    font-size: 44px;
    color: #07121e;
    text-align: right;
    padding-bottom: 30px
}

.seo_sec2 p {
    font-family: lato;
    font-size: 18px;
    color: #07121e;
    text-align: right;
    padding-bottom: 20px
}

.seo_sec3 p {
    font-family: lato;
    font-size: 18px;
    color: #07121e;
    text-align: left;
    padding-bottom: 20px
}

.some_words p {
    width: 60%;
    margin: 0 auto;
    font-size: 15px;
    padding: 10px
}

.seo_sec2_btn {
    float: right;
    font-size: 16px;
    font-weight: 300;
    color: #07121e;
    border: 1px solid #87898d;
    border-radius: 25px;
    background-color: transparent;
    padding: 12px 40px;
    display: block;
    background: linear-gradient(to right, #e5422b 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all .3s ease-out
}

.seo_sec2_btn:hover {
    float: right;
    font-size: 16px;
    font-weight: 300;
    color: #fff;
    border: 1px solid #87898d;
    border-radius: 25px;
    background-color: transparent;
    padding: 12px 40px;
    display: block;
    background: linear-gradient(to right, #e5422b 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: left bottom;
    transition: all .3s ease-out
}

.seo_sec3_title {
    font-family: lato;
    font-size: 44px;
    color: #07121e;
    text-align: left;
    padding-bottom: 30px
}

.seo_why_main {
    background-image: url(../images/ucohome/why_ucodice_back.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0 7%
}

.seo_why {
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #fff;
    padding: 65px 50px;
    margin: 245px 0 105px 0;
    box-shadow: 0 0 46px -27px
}

.seo_why_small {
    padding: 0 40px
}

.seo_why_title {
    font-size: 22px;
    color: #5a4466
}

.seo_why p {
    font-family: lato;
    font-size: 17px;
    color: #8f8e8f;
    font-weight: 400;
    line-height: 24px
}

.ending2 {
    margin-bottom: 100px
}

.ending2_title {
    font-family: lato;
    color: #494141;
    font-size: 100px;
    font-weight: 900
}

.ending2_subtitle {
    overflow: hidden;
    height: 220px
}

.ending2_subtitle p {
    font-family: lato;
    color: #ebac9a;
    font-size: 110px;
    font-weight: 900;
    line-height: 115px
}

.banner_web_dev_main {
    background-image: url(../images/ucohome/banner_web_dev.jpg);
    background-repeat: no-repeat;
    min-height: 650px;
    background-color: #010224;
    animation: banner_web_dev 120s linear infinite
}

@keyframes banner_web_dev {
    0% {
        background-position: 0 0
    }
    50% {
        background-position: 100% 0
    }
    100% {
        background-position: 0 0
    }
}

.banner_web_dev {
    left: 10%;
    position: absolute;
    top: 25%
}

.web_dev_title {
    font-family: "Playfair Display", serif;
    font-size: 85px;
    line-height: 90px;
    font-weight: 600;
    background-size: 200%;
    background-image: none;
    background-image: linear-gradient(45deg, #fff070 0, #fff070 35%, #00c9d3 66%, #00c9d3 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    animation: glow 9s linear infinite
}

@keyframes glow {
    0% {
        background-position: 0 43%
    }
    50% {
        background-position: 100% 58%
    }
    100% {
        background-position: 0 43%
    }
}

.web_dev_content_main {
    margin-bottom: 30px;
    padding-left: 60px;
    /*padding-top: 30px;*/
    background-color: #140f21;
    width: 100%;
    padding-bottom: 30px;
    /*background-image:url(../images/ucohome/skills-bg.jpg);*/
    background-size: cover;
    background-position: center bottom
}

.web_dev_content {
    text-align: center;
    width: 100%;
    /*padding:0% 0% 0 30%;*/
}

.web_dev_served {
    text-align: center;
    width: 100%;
    background-color: white;
    /*padding-bottom:3%;*/
    margin-top: 30px;
}

.web_dev_served_heading {
    text-align: center;
    width: 100%;
    padding: 4% 20% 1% 20%;
    background-color: white;
}

.color-white {
    color: #fff !important
}

.cms_text {
    padding-right: 150px;
    text-align: right
}

.cms_text p {
    font-family: clear sans;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px
}

.website_development_text {
    padding-left: 150px;
    text-align: left
}

.website_development_text p {
    font-family: clear sans;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px
}

.web_dev_content_title {
    font-family: clear sans;
    color: #fff;
    margin-bottom: 50px;
    font-weight: 400;
    position: relative;
    max-width: 700px;
    width: 100%;
    line-height: 150%;
    font-size: 32px;
    text-align: left;
}

/*.web_dev_content_title::before{content:"";position:absolute;top:25px;left:-75px;width:60px;height:3px;background:#fff}*/

.web_dev_served_title {
    font-family: proxima_nova_alt_rgregular;
    color: red;
    margin-bottom: 40px;
    margin-top: 0px;
    font-weight: 700;
    position: relative;
    max-width: 700px;
    width: 100%;
    line-height: 150%;
    font-size: 30px;
    text-align: left
}

/*.web_dev_served_title::before{content:"";position:absolute;top:40px;left:-75px;width:60px;height:5px;background:#2b2c4a}*/

.web_development_tech {
    padding: 0% 0%;
    text-align: center;
    padding-bottom: 20px;
}

.served_boxes {
    padding: 0 6% 3% 6%
}

.box_up h5,
.box_up1 h5 {
    color: #3f3b3c;
    font-size: 18px;
    padding: 0;
    margin: 0
}

.box_up {
    width: 100%;
    height: 150px;
    color: #3f3b3c;
    border-radius: 6px;
    border: 1px solid;
    background-color: #fff;
    /* box-shadow:3px 3px 15px -5px;
  margin-bottom:30px;*/
    padding: 10px;
    font-size: 18px;
    transition: transform 1s;
}

.box_up:hover {
    transform: rotate(15deg)
}

.box_up img {
    transition: transform 1s
}

.box_up img:hover {
    transform: scale(1.1);
    transform: rotate(-15deg)
}

.box_up1 {
    width: 100%;
    height: 150px;
    color: #3f3b3c;
    border-radius: 6px;
    border: 1px solid #fff;
    background-color: #fff;
    box-shadow: 3px 3px 15px -5px;
    margin-bottom: 30px;
    padding: 10px;
    margin-top: 20px;
    font-size: 18px;
    transition: transform 1s
}

.box_up1:hover {
    transform: rotate(15deg)
}

.box_up1 img {
    transition: transform 1s
}

.box_up1 img:hover {
    transform: scale(1.1);
    transform: rotate(-15deg)
}

.box_up_left {
    width: 100%;
    height: 150px;
    color: #3f3b3c;
    border-radius: 6px;
    border: 1px solid #fff;
    background-color: #fff;
    box-shadow: 3px 3px 15px -5px;
    margin-bottom: 30px;
    padding: 10px;
    font-size: 18px;
    transform: rotate(8deg) !important;
    transition: transform 1s !important
}

.box_up_left:hover {
    transform: rotate(0)
}

.leaf-orange {
    position: absolute;
    top: 34%;
    right: 56%
}

.web_dev_side_img {
    position: absolute;
    right: 5%;
    top: 10%;
    animation-name: floating;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out
}

.blog_big {
    position: relative;
    height: 447px;
    margin-top: 25px;
    padding: 50px 60px
}

.blog_big img {
    position: absolute;
    top: 0;
    left: 0;
    overflow: visible
}

.blog_big h3 {
    background-color: #e5422b;
    font-family: clear sans;
    font-size: 16px;
    text-transform: uppercase;
    color: #fff;
    padding: 5px;
    position: relative;
    display: table-cell
}

.blog_big p {
    font-family: clear sans;
    font-weight: 400;
    font-size: 25px;
    color: #fff;
    padding-top: 35px;
    position: relative;
    padding-right: 10%;
    line-height: 40px
}

.blog_big a {
    position: relative
}

.blog_small {
    position: relative;
    margin-top: 25px;
    padding-left: 0
}

.blog_small h3 {
    background-color: #e5422b;
    font-family: clear sans;
    font-size: 16px;
    text-transform: uppercase;
    color: #fff;
    padding: 5px;
    position: absolute;
    top: 10px;
    left: 20px;
    display: table-cell
}

.blog_small p {
    font-family: clear sans;
    font-weight: 400;
    font-size: 18px;
    color: #fff;
    padding: 5px;
    position: absolute;
    top: 60px;
    left: 15px;
    padding-right: 30%
}

.blog_small a {
    position: absolute;
    top: 160px;
    right: 40px
}

.blog_small_left {
    position: relative;
    margin-top: 25px
}

.blog_small_left h3 {
    background-color: #e5422b;
    font-family: clear sans;
    font-size: 16px;
    text-transform: uppercase;
    color: #fff;
    padding: 5px;
    position: absolute;
    top: 10px;
    left: 20px;
    display: table-cell
}

.blog_small_left p {
    font-family: clear sans;
    font-weight: 400;
    font-size: 18px;
    color: #fff;
    padding: 5px;
    position: absolute;
    top: 60px;
    left: 15px;
    padding-right: 30%
}

.blog_small_left a {
    position: absolute;
    top: 160px;
    right: 40px
}

.blog_main {
    background-color: #080816;
    padding-top: 100px;
    padding-bottom: 100px;
    padding-left: 5%;
    padding-right: 5%
}

.blog_main_left {
    margin-top: 80px
}

.blog1 {
    margin-top: 80px
}

.blog1 h1 {
    font-size: 45px;
    font-family: alef;
    font-weight: 600;
    color: #f99314
}

.blog1 p {
    font-size: 18px !important;
    font-family: alef;
    font-weight: 100;
    color: #97979c !important;
    line-height: 28px !important;
    padding-top: 20px;
    text-align: justify margin-bottom:20px;
}

.blog1 ul {
    padding-top: 50px;
    padding-left: 20px
}

.blog1 ul li {
    list-style: square;
    font-size: 18px;
    font-family: alef;
    color: #76767d;
    padding-bottom: 20px;
    text-align: justify;
    padding-left: 10px
}

.blog_h_line {
    width: 100%;
    height: 1px;
    background-color: #121227;
    margin: 15px 0 50px
}

.breadcum a {
    color: #888;
    font-size: 14px
}

.breadcum a:hover {
    color: #f99314;
    text-decoration: underline !important
}

.breacum_select {
    color: #b9b9b9 !important
}

.breacum_select:hover {
    color: #f99314 !important
}

.blogs_para_bold {
    font-weight: 700;
    color: #f99314
}

.skills_projects_box_up h5 {
    color: #3f3b3c;
    font-size: 24px;
    padding-top: 13px;
    margin: 0
}

.skills_projects_box_up {
    width: 100%;
    height: 280px;
    color: #3f3b3c;
    border-radius: 6px;
    border: 1px solid #fff;
    background-color: #fff;
    box-shadow: 3px 3px 15px -5px;
    margin-bottom: 30px;
    padding: 10px;
    font-size: 18px;
    transition: transform 1s
}

.skills_projects_box_up:hover {
    transform: rotate(15deg)
}

.skills_projects_box_up img {
    transition: transform 1s;
    width: 100%;
    height: 215px
}

.comment-block_main h1 {
    font-size: 36px;
    background-color: #f4f4f4;
    width: 64%;
    margin: 0 auto;
    padding: 70px 0 40px
}

.comment_block .create_new_comment .input_comment {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    width: calc(100% - 75px)
}

.comment-block_main {
    background-color: #f4f4f4
}

.comment_block .create_new_comment .input_comment {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    width: calc(100% - 75px)
}

.comment_block .new_comment .comment_body {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 75px);
    min-height: 65px;
    margin-left: 10px;
    padding: 5px 10px;
    font-size: .9rem;
    color: #555;
    background-color: #fff;
    border-bottom: 2px solid #f2f2f2
}

.comment_block .create_new_comment .input_comment input[type=text] {
    width: 100%;
    font-family: Lato, sans-serif;
    font-weight: 300;
    font-size: 20px;
    padding: 10px;
    margin-left: 10px;
    border: none;
    border-bottom: 2px solid #f2f2f2
}

.comment_block .create_new_comment {
    padding: 20px 0
}

.comment_block .new_comment {
    width: 100%;
    height: auto;
    padding: 20px 0;
    border-top: 1px solid #e6e6e6
}

.comment_block .new_comment .user_comment {
    list-style-type: none
}

.user_avatar {
    width: 65px;
    height: 65px;
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    border-radius: 50%
}

.comment_block .new_comment .comment_body {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 75px);
    min-height: 65px;
    margin-left: 10px;
    padding: 5px 10px;
    font-size: .9rem;
    color: #555;
    background-color: #fff;
    border-bottom: 2px solid #f2f2f2
}

.comment_block .new_comment .comment_body {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 75px);
    min-height: 65px;
    margin-left: 10px;
    padding: 5px 10px;
    font-size: 16px;
    color: #555;
    background-color: #fff;
    border-bottom: 2px solid #f2f2f2
}

.comment_block .new_comment .comment_toolbar {
    width: 100%
}

.comment_block .new_comment .comment_toolbar .comment_details {
    display: inline-block;
    vertical-align: middle;
    width: 70%;
    text-align: left
}

.comment_block .new_comment .comment_toolbar ul {
    list-style-type: none;
    padding-left: 75px;
    font-size: 0
}

.comment_block .new_comment .comment_toolbar ul li {
    display: inline-block;
    padding: 5px;
    font-size: 1.1rem;
    color: #d9d9d9
}

.comment_block .new_comment .comment_toolbar ul {
    list-style-type: none;
    padding-left: 75px;
    font-size: 0
}

*,
:after,
:before {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    transition: all .2s ease
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.fa-clock-o:before {
    content: "\f017"
}

.comment_block .new_comment .comment_toolbar .comment_tools {
    display: inline-block;
    vertical-align: middle;
    width: 30%;
    text-align: right
}

.comment_block {
    width: 65%;
    height: 100%;
    margin: 0 auto;
    padding: 10px
}

.create_new_comment {
    width: 100%;
    padding: 20px 0;
    vertical-align: middle;
    margin-left: 10px;
    width: calc(100% - 75px)
}

input[type=text] {
    width: 100%;
    font-family: $LATO;
    font-weight: 300;
    font-size: 1.3rem;
    padding: 10px;
    border: none;
    border-bottom: 2px solid lighten($GREY, 15%)
}

&:focus {
    outline: 0;
    border-bottom: 2px solid lighten($GREY, 10%)
}

.comment_body {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 75px);
    min-height: 65px;
    margin-left: 10px;
    padding: 5px 10px;
    font-size: .9rem;
    color: #555;
    background-color: $WHITE;
    border-bottom: 2px solid lighten($GREY, 15%);
    background-color: lighten($GREY, 18%);
    border-bottom: 2px solid lighten($GREY, 15%);
    border-radius: 5px
}

span {
    color: $BLUE;
    margin-right: 2px
}

.comment_tools {
    display: inline-block;
    vertical-align: middle;
    width: 30%;
    text-align: right
}

.image-slider__slide-overlay {
    position: absolute;
    mix-blend-mode: multiply;
    -webkit-transition: all .4s ease-in-out 0s;
    transition: all .4s ease-in-out 0s;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    background-color: #00adb1;
    opacity: 0
}

.image-slider__slide:hover .image-slider__slide-overlay {
    opacity: 1
}

.home_work_section_left img {
    width: 100%;
    margin-right: 50px
}

.home_work_section img {
    width: 100%
}

.home_work_section_left {
    background-color: #000
}

.home_work_section_right {
    padding-top: 170px
}

.home_about_section {
    background-color: #0d0b0b
}

.aaaaa {
    position: absolute;
    top: 28%;
    left: 37%
}

a:active,
a:hover {
    outline: 0
}

a:focus,
a:hover {
    color: #23527c
}

*,
:after,
:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.video_over {
    background-image: url(../images/video_over.png);
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.width_100 {
    width: 100% !important
}

.pad_0 {
    padding: 0 !important
}

#wrap {
    position: relative;
    width: 100%;
    overflow: hidden
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400;
    color: #141414;
    font-family: Montserrat, sans-serif;
    font-weight: 700
}

h1 {
    font-size: 42px
}

h2 {
    font-size: 36px;
    font-weight: 700
}

h3 {
    font-size: 30px
}

h4 {
    font-size: 24px
}

h5 {
    font-size: 18px
}

h6 {
    font-size: 14px;
    font-weight: 700
}

a {
    text-decoration: none !important;
    font-family: Montserrat, sans-serif
}

ul {
    margin-bottom: 0
}

li {
    list-style: none
}

a {
    text-decoration: none;
    color: #141414
}

p.intro-small {
    font-style: italic;
    color: #f5f5f5;
    width: 80%;
    margin: 0 auto
}

section {
    position: relative;
    overflow: hidden;
    width: 100%;
    background: #fff
}

@media only screen and (min-width:1041px) and (max-width:1185px) {
    .agency {
        font-size: 83pt !important
    }
    #who-we-are {
        font-size: 35pt !important
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .hero_service_main {
        bottom: -436px
    }
    .ux_design_para {
        padding-top: 18%
    }
    .agency {
        right: 0 !important
    }
}

@media only screen and (min-width:0px) and (max-width:954px) {
    .ux_design_para {
        padding-top: 18%
    }
}

@media only screen and (min-width:0px) and (max-width:954px) {
    .ux_design_para {
        padding-top: 18%
    }
}

.agency {
    font-size: 84pt;
    color: #3e3f3f;
    font-weight: 900;
    letter-spacing: -12px;
    position: relative;
    z-index: .5;
    right: 21px;
    opacity: .5
}

.arrow {
    width: 233px;
    margin-top: 14%
}

.line {
    margin-top: 14px;
    width: 220px;
    background: #fff;
    height: 2px;
    float: left
}

.point {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 13px solid #fff;
    float: right;
    position: relative;
    top: 7px
}

.about-use-description {
    padding-right: 14%
}

#about-desc {
    position: relative;
    top: -37px
}

.video-opacity {
    opacity: .9;
    width: 100%;
    background: #0f1010;
    position: absolute;
    top: 0;
    height: 100%
}

#mob-read {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border: 2px solid;
    display: none !important
}

.mob-about {
    padding-left: 41%;
    padding-right: 44%
}

@media only screen and (min-width:0px) and (max-width:370px) {
    .home_video_banner_text ul li {
        font-size: 13px
    }
    .mob-about {
        padding-left: 31%;
        padding-right: 37%
    }
}

@media only screen and (min-width:371px) and (max-width:415px) {
    #about-desc {
        top: -2px !important
    }
    .home_video_banner_text ul li {
        font-size: 18px
    }
}

#video_slider {
    display: flex;
    position: relative;
    flex-direction: column;
    width: 100vw;
    height: 100vh
}

.home_about_section {
    background-color: #0d0b0b
}

.location_box1,
.location_box2 {
    background-size: 100%
}

@media only screen and (min-width:768px) and (max-width:1148px) {
    .upper_footer_img {
        margin: 0 65px;
        background-size: 100%
    }
}

.testimonial-view-all {
    margin-top: 110px !important;
    text-align: center !important
}

@media only screen and (min-width:768px) and (max-width:812px) {
    .testimonial-view-all {
        margin-top: 0 !important
    }
}

@media only screen and (min-device-width:1025px) and (max-device-width:1133px) and (orientation:landscape) {
    #wide_menu {
        display: flex
    }
}

@media only screen and (min-device-width:1025px) and (max-device-width:1199px) and (orientation:landscape) {
    .location_box1,
    .location_box1:hover,
    .location_box2,
    .location_box2:hover {
        background-size: 100% 100%
    }
}

@media only screen and (max-width:1024px) and (min-width:992px) and (orientation:landscape) {
    .location_box1,
    .location_box2 {
        background-size: 100% 98% !important
    }
    .location_box1 img,
    .location_box2 img {
        padding-top: 0 !important
    }
}