body { --font-size: 18px; --font-size-heading: 28px; --font-size-heading_sub: 25px; --font-size-heading_sub_sub: 20px; --line-height: 1.77; --font-extralight: 200; --font-light: 300; --font-regular: 400; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; --font-black: 900; --btn-radius: 20px; --card-radius: 30px; --bullet-size: 12px; --font-page-title: 28px; --page-title-letter-space: 1px; --textleft: left; --textcenter: center; } #header { width: 100%; position: absolute; top: 30px; left: 0; right: 0; padding: 0 30px; z-index: 12; -webkit-transition: all .3s cubic-bezier(.77, 0, .175, 1) 0s; -o-transition: all .3s cubic-bezier(.77, 0, .175, 1) 0s; transition: all .3s cubic-bezier(.77, 0, .175, 1) 0s } #header .logo { float: left; position: absolute; margin: 0; z-index: 1; left: 2%; top: 0px; } #header .logo a { display: block; float: left; position: relative; z-index: 1 } #header .logo a img { float: left; -webkit-transition: all .3s ease-in-out 0s; -o-transition: all .3s ease-in-out 0s; transition: all .3s ease-in-out 0s } #header .logo a img.light_logo { position: relative; z-index: 1; width: 110px; } #header .logo a img.dark_logo { position: absolute; left: 0; top: 0; opacity: 0; width: 136px; -o-transition-duration: .1s; -webkit-transition-duration: .1s; transition-duration: .1s; -o-transform: translate(-100px, 0); -webkit-transform: translate(-100px, 0); transform: translate(-100px, 0) } #header .logo svg { position: absolute; right: -160px; bottom: -120px; overflow: visible; -webkit-transition: all .3s cubic-bezier(.77, 0, .175, 1) 0s; -o-transition: all .3s cubic-bezier(.77, 0, .175, 1) 0s; transition: all .3s cubic-bezier(.77, 0, .175, 1) 0s; pointer-events: none } #header .logo path.logobgsvg { fill: rgba(255, 255, 255, .2); opacity: 1 } #header .quick_inq_mob { position: absolute; left: 70px; right: 70px; text-align: center; display: none } #header .quick_inq_mob a { display: inline-block; height: 34px; line-height: 34px } #header .header-right { float: right; position: relative; z-index: 1; position: absolute; right: 30px; top: 0 } #header .header-right .h_btnbox { float: left; margin: 10px 0 0 0 } #header .header-right .menubtn { float: left; margin: 0 0 0 40px; position: relative; z-index: 4 } #header .header-right .menubtn a { display: block; width: 60px; height: 60px; position: relative; padding-top: 21px } #header .header-right .menubtn a svg { position: absolute; left: 0; top: 0 } #header .header-right .menubtn a span { display: block; height: 2px; background: #fff; left: 50%; top: 50%; width: 25px; margin: 0; position: absolute; z-index: 1; -webkit-transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s; -o-transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s; transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s; -o-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } #header .header-right .menubtn a span:before { content: ""; position: absolute; background: #fff; left: 0; top: -8px; margin-top: 0; height: 2px; width: 25px; -webkit-transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s; -o-transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s; transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s } #header .header-right .menubtn a span:after { content: ""; position: absolute; background: #fff; left: 0; bottom: -8px; margin-top: 0; height: 2px; width: 17px; -webkit-transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s; -o-transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s; transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s } #header .header-right .menubtn a:hover span:before { width: 17px } #header .header-right .menubtn a:hover span:after { width: 25px } #header .header-right .menubtn a.menu-open circle { stroke: #333 } #header .header-right .menubtn a.menu-open span { background: none; -o-transform: translate(-50%, -50%) rotateZ(-180deg); -webkit-transform: translate(-50%, -50%) rotateZ(-180deg); transform: translate(-50%, -50%) rotateZ(-180deg) } #header .header-right .menubtn a.menu-open span:before { width: 25px; -o-transform: rotateZ(45deg); -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); background: #333; top: 0 } #header .header-right .menubtn a.menu-open span:after { width: 25px; -o-transform: rotateZ(-45deg); -webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg); background: #333; bottom: 0 } #header .primary-nav { text-align: center; font-size: 0 } #header .primary-nav ul { display: inline-block; vertical-align: top; margin: 0; padding: 18px 0 0 0 } #header .primary-nav ul li { display: block; float: left; margin: 0; padding: 0 24px } #header .primary-nav ul li a { display: block; font-size: 15px; color: #fff; position: relative; font-family: 'ITC Avant Garde Std Bk', sans-serif; font-weight: 400; letter-spacing: 2px; -webkit-transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s; -o-transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s; transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s } #header .primary-nav ul li a:after { content: ''; position: absolute; left: 50%; height: 2px; background: #fff; bottom: -3px; width: 0; -o-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); -webkit-transition: all .3s cubic-bezier(.77, 0, .175, 1) 0s; -o-transition: all .3s cubic-bezier(.77, 0, .175, 1) 0s; transition: all .3s cubic-bezier(.77, 0, .175, 1) 0s } #header .primary-nav ul li a:hover:after { width: 100% } #header .primary-nav ul li.active a:after { width: 100% } #header:before { content: ''; position: absolute; left: 100%; top: -45px; right: 0; bottom: -35px; height: 143px; opacity: 1; -webkit-transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s; -o-transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s; transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s; background: #452523; } #header.sticky_header { top: 15px; position: fixed; padding-top: 15px; } #header.sticky_header .logo svg { opacity: 0; -o-transform: translate(0, -200px); -webkit-transform: translate(0, -200px); transform: translate(0, -200px) } #header.sticky_header .logo a img.light_logo { width: 90px; } #header.sticky_header .primary-nav { text-align: center; font-size: 0 } #header.sticky_header .primary-nav ul li a:hover:after { width: 100% } #header.sticky_header .primary-nav ul li a.activemenu:after { width: 100% } #header.sticky_header .primary-nav ul li.active a:after { width: 0 } #header.sticky_header .primary-nav ul li.active a.activemenu:after { width: 100% } #header.sticky_header:before { opacity: 1; left: 0 } #header.sticky_header .header-right { top: 12px; } #header .primary_sub_nav { position: fixed; top: 0; right: 0; height: 100vh; overflow: auto; left: 0; visibility: hidden; opacity: 0; background: #fff; text-align: left; z-index: 5; -o-transition-property: opacity, visibility; -webkit-transition-property: opacity, visibility; transition-property: opacity, visibility; -o-transition-duration: .3s; -webkit-transition-duration: .3s; transition-duration: .3s; -o-transition-timing-function: ease-in-out, ease-in-out; -webkit-transition-timing-function: ease-in-out, ease-in-out; transition-timing-function: ease-in-out, ease-in-out } #header .primary_sub_nav .p_menubtn a { display: block; width: 60px; height: 60px; padding-top: 21px; position: relative } #header .primary_sub_nav .p_menubtn a svg { position: absolute; left: 0; top: 0 } #header .primary_sub_nav .p_menubtn a circle { stroke: #b95828 } #header .primary_sub_nav .p_menubtn a span { position: absolute; display: block; height: 2px; background: none; left: 50%; top: 50%; width: 25px; margin: 0; z-index: 1; -o-transform: translate(-50%, -50%) rotateZ(-180deg); -webkit-transform: translate(-50%, -50%) rotateZ(-180deg); transform: translate(-50%, -50%) rotateZ(-180deg); -webkit-transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s; -o-transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s; transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s } #header .primary_sub_nav .p_menubtn a span:before { content: ""; position: absolute; background: #b95828; left: 0; top: 0; margin-top: 0; height: 2px; width: 25px; -webkit-transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s; -o-transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s; transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s; -o-transform: rotateZ(45deg); -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg) } #header .primary_sub_nav .p_menubtn a span:after { content: ""; position: absolute; background: #b95828; left: 0; bottom: 0; margin-top: 0; height: 2px; width: 25px; -webkit-transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s; -o-transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s; transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s; -o-transform: rotateZ(-45deg); -webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg) } #header .primary_sub_nav .left_primary { display: -webkit-box; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; -moz-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -moz-justify-content: center; justify-content: center; width: 20vw; position: absolute; left: 0; top: 0; height: 100vh; background: #eee9e2; z-index: 1; -o-transform: translate(-20vw, 0); -webkit-transform: translate(-20vw, 0); transform: translate(-20vw, 0); opacity: 0; -o-transition-property: transform, opacity; -webkit-transition-property: transform, opacity; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; -o-transition-property: opacity, -o-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform, -o-transform; -o-transition-duration: .5s; -webkit-transition-duration: .5s; transition-duration: .5s; -o-transition-timing-function: ease-in-out, ease-in-out; -webkit-transition-timing-function: ease-in-out, ease-in-out; transition-timing-function: ease-in-out, ease-in-out } #header .primary_sub_nav .services_bg { position: absolute; left: 0; top: 0; width: 100%; height: 100% } #header .primary_sub_nav .services_bg.uiux_sub_bg { background: #41231f; /* background: -webkit-linear-gradient(-45deg, #373435 1%, #5e5b5d 100%); background: -webkit-linear-gradient(315deg, #373435 1%, #5e5b5d 100%); background: -o-linear-gradient(315deg, #373435 1%, #5e5b5d 100%); background: linear-gradient(135deg, #373435 1%, #5e5b5d 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#373435', endColorstr='#5e5b5d', GradientType=1 ) */ } #header .primary_sub_nav .services_bg.webapp_sub_bg { background: #41231f; /* background: -webkit-linear-gradient(left, #ffa261 0%, #e9cd6e 100%); background: -webkit-gradient(linear, left top, right top, from(#ffa261), to(#e9cd6e)); background: -o-linear-gradient(left, #ffa261 0%, #e9cd6e 100%); background: linear-gradient(to right, #ffa261 0%, #e9cd6e 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa261', endColorstr='#e9cd6e', GradientType=1 ) */ } #header .primary_sub_nav .services_bg.ecomm_sub_bg { background: #41231f; /* background: -webkit-linear-gradient(left, #00a87f 0%, #b9d97f 100%); background: -webkit-gradient(linear, left top, right top, from(#00a87f), to(#b9d97f)); background: -o-linear-gradient(left, #00a87f 0%, #b9d97f 100%); background: linear-gradient(to right, #00a87f 0%, #b9d97f 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a87f', endColorstr='#b9d97f', GradientType=1 ) */ } #header .primary_sub_nav .services_bg.mobile_sub_bg { background: #41231f; } #header .primary_sub_nav .services_bg.techno_sub_bg { background: #41231f; /* background: -webkit-linear-gradient(left, #a33de4 0%, #dc78d1 100%); background: -webkit-gradient(linear, left top, right top, from(#a33de4), to(#dc78d1)); background: -o-linear-gradient(left, #a33de4 0%, #dc78d1 100%); background: linear-gradient(to right, #a33de4 0%, #dc78d1 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a33de4', endColorstr='#dc78d1', GradientType=1 ) */ } #header .primary_sub_nav .services_bg.industri_sub_bg { background: #41231f; /* background: -webkit-linear-gradient(left, #f54ea2 0%, #ff7676 100%); background: -webkit-gradient(linear, left top, right top, from(#f54ea2), to(#ff7676)); background: -o-linear-gradient(left, #f54ea2 0%, #ff7676 100%); background: linear-gradient(to right, #f54ea2 0%, #ff7676 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f54ea2', endColorstr='#ff7676', GradientType=1 ) */ } #header .primary_sub_nav .primary_sub { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding-left: 20vw; opacity: 0; visibility: hidden; -o-transition-property: visibility, opacity; -webkit-transition-property: visibility, opacity; transition-property: visibility, opacity; -o-transition-duration: .3s; -webkit-transition-duration: .3s; transition-duration: .3s; -o-transition-timing-function: ease-in-out, ease-in-out; -webkit-transition-timing-function: ease-in-out, ease-in-out; transition-timing-function: ease-in-out, ease-in-out } #header .primary_sub_nav .primary_sub.active { opacity: 1; visibility: visible } #header .primary_sub_nav .right_primary { width: 45vw; position: absolute; height: 92vh; top: 8vh; right: 0 } #header .primary_sub_nav .right_primary:after { content: ''; position: absolute; left: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .3); height: 0; -webkit-transition: all 2.5s cubic-bezier(.77, 0, .175, 1) 0s; -o-transition: all 2.5s cubic-bezier(.77, 0, .175, 1) 0s; transition: all 2.5s cubic-bezier(.77, 0, .175, 1) 0s } #header .primary_sub_nav .middle_primary { width: 35vw; position: absolute; left: 20vw; top: 0; height: 100vh; padding-top: 8vh; padding-left: 4vw; display: -webkit-box; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; -moz-align-items: center; align-items: center } #header .primary_sub_nav .middle_primary .service_title { position: absolute; left: 4vw; bottom: 4vw } #header .primary_sub_nav .middle_primary .service_title .header_title { color: #fff; font-size: 36px; font-weight: var(--font-semibold); } #header .primary_sub_nav .middle_primary ul { display: block; margin: 0; padding: 0; -o-transform: translate(-5vw, 0); -webkit-transform: translate(-5vw, 0); transform: translate(-5vw, 0); opacity: 0; -webkit-transition: all .5s ease-in-out 0s; -o-transition: all .5s ease-in-out 0s; transition: all .5s ease-in-out 0s } #header .primary_sub_nav .middle_primary ul li { display: block; margin: 0; padding: 0 0 5px 0 } #header .primary_sub_nav .middle_primary ul li a { display: inline-block; vertical-align: top; margin: 0; padding: 3px 0; color: #fff; position: relative; letter-spacing: 2px; } #header .primary_sub_nav .middle_primary ul li a:after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; -o-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); width: 100%; background: #fff; -webkit-transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s; -o-transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s; transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s; -webkit-transform-origin: left top; -o-transform-origin: left top; transform-origin: left top } #header .primary_sub_nav .middle_primary ul li a:hover:after { -o-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1) } #header .primary_sub_nav .svgthreemain_1 { height: 60vh; margin: 0 auto } #header .primary_sub_nav .svgthreemain_1 svg { position: absolute; z-index: 2 } #header .primary_sub_nav .svgthreemain_1 .theeinbox_1 { position: relative; overflow: hidden; margin: 50px auto 0; -o-transform: translate(-10vw, 0); -webkit-transform: translate(-10vw, 0); transform: translate(-10vw, 0); opacity: 0; -o-transition-property: opacity, transform; -webkit-transition-property: opacity, transform; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; -o-transition-property: opacity, -o-transform; transition-property: opacity, transform; transition-property: opacity, transform, -webkit-transform, -o-transform; -o-transition-duration: .5s; -webkit-transition-duration: .5s; transition-duration: .5s; -o-transition-timing-function: ease-in-out, ease-in-out; -webkit-transition-timing-function: ease-in-out, ease-in-out; transition-timing-function: ease-in-out, ease-in-out } #header .primary_sub_nav .svgthreemain_1 .limbimg { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; background-repeat: no-repeat; background-position: center center; background-size: contain } #header .primary_sub_nav .svgthreemain_1 .limbimg.frontimg { z-index: 3 } #header .primary_sub_nav .txt_content { padding: 2vh 8vw 6vh 10vw } #header .primary_sub_nav .txt_content p { color: #fff; margin: 0; padding: 0; } .secondry-nav { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: #fafafa; opacity: 0; visibility: hidden; z-index: 2; -o-transition-property: opacity, visibility; -webkit-transition-property: opacity, visibility; transition-property: opacity, visibility; -o-transition-duration: .3s; -webkit-transition-duration: .3s; transition-duration: .3s; -o-transition-timing-function: ease-in-out, ease-in-out; -webkit-transition-timing-function: ease-in-out, ease-in-out; transition-timing-function: ease-in-out, ease-in-out } .secondry-nav .sec-leftnav { position: absolute; width: 50%; height: 100%; background: #ccc; left: 0; top: 0; -o-transform: translate(-100px, 0); -webkit-transform: translate(-100px, 0); transform: translate(-100px, 0); padding: 0; -webkit-transition: transform .5s cubic-bezier(.77, 0, .175, 1) .5s; -o-transition: transform .5s cubic-bezier(.77, 0, .175, 1) .5s; -webkit-transition: -webkit-transform .5s cubic-bezier(.77, 0, .175, 1) .5s; transition: -webkit-transform .5s cubic-bezier(.77, 0, .175, 1) .5s; -o-transition: -o-transform .5s cubic-bezier(.77, 0, .175, 1) .5s; transition: transform .5s cubic-bezier(.77, 0, .175, 1) .5s; transition: transform .5s cubic-bezier(.77, 0, .175, 1) .5s, -webkit-transform .5s cubic-bezier(.77, 0, .175, 1) .5s, -o-transform .5s cubic-bezier(.77, 0, .175, 1) .5s; display: -webkit-box; display: -moz-flex; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-direction: normal; -webkit-box-orient: vertical; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; max-height: 100vh } .secondry-nav .sec-leftnav:before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: block; -webkit-transition: all .4s ease-in-out 0s; -o-transition: all .4s ease-in-out 0s; transition: all .4s ease-in-out 0s; opacity: 0; visibility: hidden } .secondry-nav .sec-leftnav .nav-design-blk { width: 33%; padding: 20px 0 0 30px; position: relative; z-index: 4 } .secondry-nav .sec-leftnav .nav-design-blk .h6 { font-size: 28px; color: #fff; font-weight: 700; text-transform: uppercase; margin: 0; padding: 0; letter-spacing: 2px; } .secondry-nav .sec-leftnav .nav-design-blk ul { margin: 0; padding: 0 } .secondry-nav .sec-leftnav .nav-design-blk ul li { margin: 0; padding: 0 } .secondry-nav .sec-leftnav .nav-design-blk ul li a { color: #fff; font-size: 13px; line-height: 20px; font-weight: 400; display: inline-block; vertical-align: top; border-radius: 4px; padding: 5px 0; -webkit-transition: all .3s ease-in-out 0s; -o-transition: all .3s ease-in-out 0s; transition: all .3s ease-in-out 0s; letter-spacing: 1px; } .secondry-nav .sec-leftnav .nav-design-blk ul li a:hover { padding-left: 10px; padding-right: 10px; background: rgba(0, 0, 0, .1) } .secondry-nav .sec-rightnav { position: absolute; width: 50%; height: 100vh; background: #fafafa; right: 0; top: 0; -o-transform: translate(-100px, 0); -webkit-transform: translate(-100px, 0); transform: translate(-100px, 0); -webkit-transition: transform .5s cubic-bezier(.77, 0, .175, 1) .5s; -o-transition: transform .5s cubic-bezier(.77, 0, .175, 1) .5s; -webkit-transition: -webkit-transform .5s cubic-bezier(.77, 0, .175, 1) .5s; transition: -webkit-transform .5s cubic-bezier(.77, 0, .175, 1) .5s; -o-transition: -o-transform .5s cubic-bezier(.77, 0, .175, 1) .5s; transition: transform .5s cubic-bezier(.77, 0, .175, 1) .5s; transition: transform .5s cubic-bezier(.77, 0, .175, 1) .5s, -webkit-transform .5s cubic-bezier(.77, 0, .175, 1) .5s, -o-transform .5s cubic-bezier(.77, 0, .175, 1) .5s } .secondry-nav .sec-rightnav .midd-links { position: absolute; left: 50%; top: 50%; -o-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } .secondry-nav .sec-rightnav .midd-links .imagelogo img { max-width: 40%; height: auto; vertical-align: top } .secondry-nav .sec-rightnav .midd-links ul { margin: 0; padding: 30px 0 0 13px; display: block } .secondry-nav .sec-rightnav .midd-links ul li { margin: 0; padding: 5px 0; display: block } .secondry-nav .sec-rightnav .midd-links ul li a { font-size: 30px; letter-spacing: 2px; color: var(--primary); font-weight: var(--font-semibold); text-transform: uppercase; display: block; line-height: 38px } .secondry-nav .sec-rightnav .midd-links ul li a:hover { color: #000 } .desktopshow { display: block; } .mobileshow { display: none; } .secondry-menu-open { //overflow: hidden } .secondry-menu-open .secondry-nav { opacity: 1; visibility: visible } .secondry-menu-open .secondry-nav .sec-leftnav { -o-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s } .secondry-menu-open .secondry-nav .sec-rightnav { -o-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s } .secondry-menu-open .h_design_data:before { background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxIDEiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEgMSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cmVjdCBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+DQoJPGxpbmVhckdyYWRpZW50IGlkPSJTVkdJRF8xXyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJyb3RhdGUoNDUpIj4NCgkJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0FFMDgzNyIvPg0KCQk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojREI0NDUzIi8+DQoJPC9saW5lYXJHcmFkaWVudD4NCgk8cG9seWdvbiBmaWxsPSJ1cmwoI1NWR0lEXzFfKSIgcG9pbnRzPSIxLDAgMCwwIDAsMSAxLDEgMSwwIAkiLz4NCjwvZz4NCjwvc3ZnPg0K) no-repeat left top; background-size: cover; opacity: 1; visibility: visible; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; z-index: 2 } .secondry-menu-open .h_technology_data:before { background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxIDEiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEgMSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cmVjdCBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+DQoJPGxpbmVhckdyYWRpZW50IGlkPSJTVkdJRF8xXyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJyb3RhdGUoNDUpIj4NCgkJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0EzM0RFNCIvPg0KCQk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojREM3OEQxIi8+DQoJPC9saW5lYXJHcmFkaWVudD4NCgk8cG9seWdvbiBmaWxsPSJ1cmwoI1NWR0lEXzFfKSIgcG9pbnRzPSIxLDAgMCwwIDAsMSAxLDEgMSwwIAkiLz4NCjwvZz4NCjwvc3ZnPg0K) no-repeat left top; background-size: cover; opacity: 1; visibility: visible; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; z-index: 2 } .secondry-menu-open .h_industry_data:before { background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxIDEiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEgMSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cmVjdCBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+DQoJPGxpbmVhckdyYWRpZW50IGlkPSJTVkdJRF8xXyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJyb3RhdGUoNDUpIj4NCgkJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0Y1NEVBMiIvPg0KCQk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojRkY3Njc2Ii8+DQoJPC9saW5lYXJHcmFkaWVudD4NCgk8cG9seWdvbiBmaWxsPSJ1cmwoI1NWR0lEXzFfKSIgcG9pbnRzPSIxLDAgMCwwIDAsMSAxLDEgMSwwIAkiLz4NCjwvZz4NCjwvc3ZnPg0K) no-repeat left top; background-size: cover; opacity: 1; visibility: visible; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; z-index: 2 } .secondry-menu-open .h_mobile_data:before { background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxIDEiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEgMSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cmVjdCBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+DQoJPGxpbmVhckdyYWRpZW50IGlkPSJTVkdJRF8xXyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJyb3RhdGUoNDUpIj4NCgkJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6IzYwNzhFQSIvPg0KCQk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojMTdFQUQ5Ii8+DQoJPC9saW5lYXJHcmFkaWVudD4NCgk8cG9seWdvbiBmaWxsPSJ1cmwoI1NWR0lEXzFfKSIgcG9pbnRzPSIxLDAgMCwwIDAsMSAxLDEgMSwwIAkiLz4NCjwvZz4NCjwvc3ZnPg0K) no-repeat left top; background-size: cover; opacity: 1; visibility: visible; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; z-index: 2 } .secondry-menu-open .h_web_data:before { background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxIDEiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEgMSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cmVjdCBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+DQoJPGxpbmVhckdyYWRpZW50IGlkPSJTVkdJRF8xXyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJyb3RhdGUoNDUpIj4NCgkJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0ZGQTI2MSIvPg0KCQk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojRTlDRDZFIi8+DQoJPC9saW5lYXJHcmFkaWVudD4NCgk8cG9seWdvbiBmaWxsPSJ1cmwoI1NWR0lEXzFfKSIgcG9pbnRzPSIxLDAgMCwwIDAsMSAxLDEgMSwwIAkiLz4NCjwvZz4NCjwvc3ZnPg0K) no-repeat left top; background-size: cover; opacity: 1; visibility: visible; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; z-index: 2 } .secondry-menu-open .h_ecommerce_data:before { background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxIDEiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEgMSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cmVjdCBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+DQoJPGxpbmVhckdyYWRpZW50IGlkPSJTVkdJRF8xXyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJyb3RhdGUoNDUpIj4NCgkJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6IzAwQTg3RiIvPg0KCQk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojQjlEOTdGIi8+DQoJPC9saW5lYXJHcmFkaWVudD4NCgk8cG9seWdvbiBmaWxsPSJ1cmwoI1NWR0lEXzFfKSIgcG9pbnRzPSIxLDAgMCwwIDAsMSAxLDEgMSwwIAkiLz4NCjwvZz4NCjwvc3ZnPg0K) no-repeat left top; background-size: cover; opacity: 1; visibility: visible; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; z-index: 2 } .mobile_primary_sub_nav { position: fixed; left: 0; right: 0; bottom: 0; top: 0; opacity: 0; visibility: hidden; -webkit-transition: all .3s cubic-bezier(.77, 0, .175, 1) 0s; -o-transition: all .3s cubic-bezier(.77, 0, .175, 1) 0s; transition: all .3s cubic-bezier(.77, 0, .175, 1) 0s } .mobile_primary_sub_nav .close_mob_btn { position: absolute; right: 15px; top: 15px; color: #fff; z-index: 11; display: block; width: 40px; height: 40px; padding-top: 21px } .mobile_primary_sub_nav .close_mob_btn span { position: absolute; display: block; height: 2px; background: none; left: 50%; top: 50%; width: 25px; margin: 0; z-index: 1; -o-transform: translate(-50%, -50%) rotateZ(-180deg); -webkit-transform: translate(-50%, -50%) rotateZ(-180deg); transform: translate(-50%, -50%) rotateZ(-180deg); -webkit-transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s; -o-transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s; transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s } .mobile_primary_sub_nav .close_mob_btn span:before { content: ""; position: absolute; background: #fff; left: 0; top: 0; margin-top: 0; height: 2px; width: 25px; -webkit-transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s; -o-transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s; transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s; -o-transform: rotateZ(45deg); -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg) } .mobile_primary_sub_nav .close_mob_btn span:after { content: ""; position: absolute; background: #fff; left: 0; bottom: 0; margin-top: 0; height: 2px; width: 25px; -webkit-transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s; -o-transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s; transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s; -o-transform: rotateZ(-45deg); -webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg) } .mobile_primary_sub_nav .primary_sub { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .1); opacity: 0; visibility: hidden; padding: 20px } .mobile_primary_sub_nav .primary_sub .service_title { padding: 10px 0 15px 0 } .mobile_primary_sub_nav .primary_sub .service_title h2 { font-family: 'Josefin Sans', sans-serif; font-weight: 400; color: #fff } .mobile_primary_sub_nav .primary_sub ul { padding: 0 } .mobile_primary_sub_nav .primary_sub ul li { display: inline-block; vertical-align: top; width: 100%; padding: 0 0 7px 0; -webkit-transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s; -o-transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s; transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s; -o-transform: translate(0, 15px); -webkit-transform: translate(0, 15px); transform: translate(0, 15px); opacity: 0 } .mobile_primary_sub_nav .primary_sub ul li a { display: block; float: left; color: #fff; font-size: 14px; font-weight: 600 } .mobile_primary_sub_nav .primary_sub.sub_uiux { background: #ae0837; background: -webkit-linear-gradient(-45deg, #ae0837 1%, #db4453 100%); background: -webkit-linear-gradient(315deg, #ae0837 1%, #db4453 100%); background: -o-linear-gradient(315deg, #ae0837 1%, #db4453 100%); background: linear-gradient(135deg, #ae0837 1%, #db4453 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ae0837', endColorstr='#db4453', GradientType=1) } .mobile_primary_sub_nav .primary_sub.sub_webapp { background: #ffa261; background: -webkit-linear-gradient(left, #ffa261 0%, #e9cd6e 100%); background: -webkit-gradient(linear, left top, right top, from(#ffa261), to(#e9cd6e)); background: -o-linear-gradient(left, #ffa261 0%, #e9cd6e 100%); background: linear-gradient(to right, #ffa261 0%, #e9cd6e 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa261', endColorstr='#e9cd6e', GradientType=1) } .mobile_primary_sub_nav .primary_sub.sub_ecomm { background: #00a87f; background: -webkit-linear-gradient(left, #00a87f 0%, #b9d97f 100%); background: -webkit-gradient(linear, left top, right top, from(#00a87f), to(#b9d97f)); background: -o-linear-gradient(left, #00a87f 0%, #b9d97f 100%); background: linear-gradient(to right, #00a87f 0%, #b9d97f 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a87f', endColorstr='#b9d97f', GradientType=1) } .mobile_primary_sub_nav .primary_sub.sub_mobile { background: #6078ea; background: -webkit-linear-gradient(left, #6078ea 0%, #17ead9 100%); background: -webkit-gradient(linear, left top, right top, from(#6078ea), to(#17ead9)); background: -o-linear-gradient(left, #6078ea 0%, #17ead9 100%); background: linear-gradient(to right, #6078ea 0%, #17ead9 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6078ea', endColorstr='#17ead9', GradientType=1) } .mobile_primary_sub_nav .primary_sub.sub_techno { background: #a33de4; background: -webkit-linear-gradient(left, #a33de4 0%, #dc78d1 100%); background: -webkit-gradient(linear, left top, right top, from(#a33de4), to(#dc78d1)); background: -o-linear-gradient(left, #a33de4 0%, #dc78d1 100%); background: linear-gradient(to right, #a33de4 0%, #dc78d1 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a33de4', endColorstr='#dc78d1', GradientType=1) } .mobile_primary_sub_nav .primary_sub.sub_industri { background: #f54ea2; background: -webkit-linear-gradient(left, #f54ea2 0%, #ff7676 100%); background: -webkit-gradient(linear, left top, right top, from(#f54ea2), to(#ff7676)); background: -o-linear-gradient(left, #f54ea2 0%, #ff7676 100%); background: linear-gradient(to right, #f54ea2 0%, #ff7676 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f54ea2', endColorstr='#ff7676', GradientType=1) } .mobile_primary_sub_nav .primary_sub.active { opacity: 1; visibility: visible } .mobile_primary_sub_nav .primary_sub.active ul li { -o-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1 } .mobile_primary_sub_nav .primary_sub.active ul li:nth-child(1) { -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s } .mobile_primary_sub_nav .primary_sub.active ul li:nth-child(2) { -webkit-transition-delay: .05s; -o-transition-delay: .05s; transition-delay: .05s } .mobile_primary_sub_nav .primary_sub.active ul li:nth-child(3) { -webkit-transition-delay: .1s; -o-transition-delay: .1s; transition-delay: .1s } .mobile_primary_sub_nav .primary_sub.active ul li:nth-child(4) { -webkit-transition-delay: .15s; -o-transition-delay: .15s; transition-delay: .15s } .mobile_primary_sub_nav .primary_sub.active ul li:nth-child(5) { -webkit-transition-delay: .2s; -o-transition-delay: .2s; transition-delay: .2s } .mobile_primary_sub_nav .primary_sub.active ul li:nth-child(6) { -webkit-transition-delay: .25s; -o-transition-delay: .25s; transition-delay: .25s } .mobile_primary_sub_nav .primary_sub.active ul li:nth-child(7) { -webkit-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s } .mobile_primary_sub_nav .primary_sub.active ul li:nth-child(8) { -webkit-transition-delay: .35s; -o-transition-delay: .35s; transition-delay: .35s } .mobile_primary_sub_nav .primary_sub.active ul li:nth-child(9) { -webkit-transition-delay: .4s; -o-transition-delay: .4s; transition-delay: .4s } .mobile_primary_sub_nav .primary_sub.active ul li:nth-child(10) { -webkit-transition-delay: .45s; -o-transition-delay: .45s; transition-delay: .45s } .mobile_primary_sub_nav .primary_sub.active ul li:nth-child(11) { -webkit-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s } .mobile_primary_sub_nav .primary_sub.active ul li:nth-child(12) { -webkit-transition-delay: .55s; -o-transition-delay: .55s; transition-delay: .55s } .mobile_primary_sub_nav .primary_sub.active ul li:nth-child(13) { -webkit-transition-delay: .6s; -o-transition-delay: .6s; transition-delay: .6s } .mobile_primary_sub_nav .primary_sub.active ul li:nth-child(14) { -webkit-transition-delay: .65s; -o-transition-delay: .65s; transition-delay: .65s } .mobile_primary_sub_nav .primary_sub.active ul li:nth-child(15) { -webkit-transition-delay: .7s; -o-transition-delay: .7s; transition-delay: .7s } .mobile_primary_sub_nav .primary_sub.active ul li:nth-child(16) { -webkit-transition-delay: .75s; -o-transition-delay: .75s; transition-delay: .75s } .mobile_primary_sub_nav .primary_sub.active ul li:nth-child(17) { -webkit-transition-delay: .8s; -o-transition-delay: .8s; transition-delay: .8s } .mobile_primary_sub_nav .primary_sub.active ul li:nth-child(18) { -webkit-transition-delay: .85s; -o-transition-delay: .85s; transition-delay: .85s } .mobile_primary_sub_nav .primary_sub.active ul li:nth-child(19) { -webkit-transition-delay: .9s; -o-transition-delay: .9s; transition-delay: .9s } .mobile_primary_sub_nav .primary_sub.active ul li:nth-child(20) { -webkit-transition-delay: .95s; -o-transition-delay: .95s; transition-delay: .95s } .mobile_primary_sub_nav.mob_active { opacity: 1; visibility: visible } body.show_primary_subnav { overflow: hidden } body.show_primary_subnav #header .logo { z-index: 7 } body.show_primary_subnav #header .logo a img.light_logo { opacity: 0 } body.show_primary_subnav #header .logo a img.dark_logo { opacity: 1; -o-transition-duration: .5s; -webkit-transition-duration: .5s; transition-duration: .5s; -o-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0) } body.show_primary_subnav #header .logo svg { display: none } body.show_primary_subnav #header .primary-nav { position: relative; z-index: 6 } body.show_primary_subnav #header .primary_sub_nav { opacity: 1; visibility: visible } body.show_primary_subnav #header .primary_sub_nav .left_primary { -o-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; background-image: url(../img/block.webp); } body.show_primary_subnav #header .primary_sub_nav .primary_sub.leaving .svgthreemain_1 .theeinbox_1 { -o-transform: translate(-10vw, 0); -webkit-transform: translate(-10vw, 0); transform: translate(-10vw, 0); opacity: 0 } body.show_primary_subnav #header .primary_sub_nav .primary_sub.leaving .middle_primary ul { -o-transform: translate(-5vw, 0); -webkit-transform: translate(-5vw, 0); transform: translate(-5vw, 0); opacity: 0 } body.show_primary_subnav #header .primary_sub_nav .primary_sub.leaving .right_primary:after { height: 0 } body.show_primary_subnav #header .primary_sub_nav .primary_sub.active .svgthreemain_1 .theeinbox_1 { -o-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1 } body.show_primary_subnav #header .primary_sub_nav .primary_sub.active .middle_primary ul { -o-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1 } body.show_primary_subnav #header .primary_sub_nav .primary_sub.active .right_primary:after { height: 56vh } body.mob_sub_active { overflow: hidden } body.mob_sub_active #header .logo { opacity: 0; visibility: hidden } body.mob_sub_active #header .header-right { opacity: 0; visibility: hidden } #icon_toggle_menu {} #icon_toggle_menu .menu_box_1 { background: url(../img/bg1.webp) no-repeat; height: 218px; text-align: center; background-size: cover; } #icon_toggle_menu .icon_menu_banner a { background-position: 94% 92%; padding: 15px; } #icon_toggle_menu .icon_menu_banner a { position: relative; z-index: 101; height: inherit; padding: 12px 15px; display: block; cursor: pointer; color: #ffffff; background: url(../img/arrow-white.svg) no-repeat 96% 92%; background-position-x: 96%; background-position-y: 92%; background-size: auto; background-size: 10px 18px; } #icon_toggle_menu .home-banner-cta-1 .icon_toggle_menu_h4 { background-image: url(../img/overseas_menu_icon.svg); } #icon_toggle_menu .home-banner-cta-2 .icon_toggle_menu_h4 { background-image: url(../img/product_menu_icon.svg); } #icon_toggle_menu .home-banner-cta-3 .icon_toggle_menu_h4 { background-image: url(../img/blog_menu_icon.svg); } #icon_toggle_menu .home-banner-cta-3 .icon_toggle_menu_h5 { background-image: url(../img/social-media-icon.svg); } #icon_toggle_menu .icon_toggle_menu_h4, #icon_toggle_menu .icon_toggle_menu_h5 { padding-top: 68px; background-position: 50% 0; background-size: 215px 56px; background-repeat: no-repeat; font-size: 20px; } #icon_toggle_menu .icon_menu_banner p { font-size: 14px; color: #fff; } #icon_toggle_menu .menu_box_2 { background: #e7e7e7 url(../img/bg2.webp); height: 218px; text-align: center; background-size: cover; } #icon_toggle_menu .menu_box_3 { background: url(../img/bg3.webp) no-repeat; height: 218px; text-align: center; background-size: cover; } #icon_toggle_menu .menu_box_4 { background: #e7e7e7; height: 327px; text-align: center; padding-top: 27%; } #icon_toggle_menu .menu_box_5 { background: url(../img/bg4.webp) no-repeat; height: 327px; text-align: center; background-size: cover; padding-top: 25%; color: #fff; } #icon_toggle_menu .menu_box_6 { background: #fff; height: 327px; text-align: center; } #icon_toggle_menu .menu_box_6 .svgthreemain_1 {} #icon_toggle_menu .menu_box_6 .svgthreemain_1 .thee_menu_inbox_6 { opacity: 1; } #icon_toggle_menu .menu_box_6 .svgthreemain_1 .thee_menu_inbox_6 { margin: 0px auto 0 0px; } #icon_toggle_menu .menu_box_6 .limbimg { margin-top: 50px; width: 40%; } #icon_toggle_menu .txt_content { padding: 0 10% 0 10%; } #icon_toggle_menu .txt_content .btnbox { text-align: center; padding-top: 15px; } #icon_toggle_menu .txt_content .btnbox a { display: inline-block; vertical-align: top; color: #000; } #icon_toggle_menu .txt_content p { color: #000; } #icon_toggle_menu .socialblock { font-size: 0; text-align: center; padding: 30px 0 0 0; display: -webkit-box; display: -moz-flex; display: -ms-flexbox; -webkit-box-pack: center; -ms-flex-pack: center; -moz-justify-content: center; justify-content: left; width: 100% } #icon_toggle_menu .socialblock a { display: inline-block; vertical-align: top; width: 40px; height: 40px; border-radius: 100px; border: solid 1px #fff; line-height: 38px; text-align: center; color: #fff; font-size: 20px; margin: 0 5px; display: -webkit-box; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -moz-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -moz-align-items: center; align-items: center } #icon_toggle_menu .socialblock a svg * { -webkit-transition: all .5s ease-in-out 0s; -o-transition: all .5s ease-in-out 0s; transition: all .5s ease-in-out 0s } #icon_toggle_menu .socialblock a:hover { color: #fff; border-color: #fff; background: #fff } #icon_toggle_menu .socialblock a:hover svg * { fill: #000 } #icon_toggle_menu .paddingzero { padding-left: 0px; padding-right: 0px; display: inline-block } @media screen and (max-width:1440px) { #header.sticky_header { top: 0; } #header.sticky_header:before { height: 85px; top: 0; } } @media screen and (min-width:1399px) { #header .primary_sub_nav .txt_content { padding: 2vh 8vw 6vh 10vw } } @media screen and (min-width:1380px) { #icon_toggle_menu .menu_box_1, #icon_toggle_menu .menu_box_2, #icon_toggle_menu .menu_box_3 { height: 243px; } #icon_toggle_menu .menu_box_4 { height: 410px; } } @media screen and (max-width:1599px) { #header .primary_sub_nav .txt_content { padding: 2vh 4vw 4vh 4vw; } #header .primary_sub_nav .right_primary{ width: 50vw; } } @media screen and (max-width:1366px) { #header .primary-nav ul li { padding: 0 16px } .secondry-nav .sec-leftnav { width: 60% } .secondry-nav .sec-leftnav .nav-design-blk { padding: 20px 0 0 20px; width: 25% } .secondry-nav .sec-leftnav .nav-design-blk .h6 { font-size: 22px } .secondry-nav .sec-leftnav .nav-design-blk ul li a { padding: 2px 0; font-size: 12px } .secondry-nav .sec-rightnav { width: 40% } .secondry-nav .sec-rightnav .midd-links ul li a { font-size: 24px; white-space: nowrap } } @media screen and (max-width:1280px) { #header .primary-nav ul li a { font-size: 15px } #header .primary_sub_nav .middle_primary { padding-top: 0 } #header .primary_sub_nav .middle_primary ul li { padding: 0 } #header .primary_sub_nav .middle_primary ul li a { font-size: 13px } #header .primary_sub_nav .middle_primary .service_title .header_title { font-size: 50px } #header .primary_sub_nav .txt_content p { font-size: 14px; line-height: 19px } } @media screen and (min-width:992px) and (max-width:1599px) { #header .header-right .secondry-nav { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } #icon_toggle_menu { min-height: 100%; } #icon_toggle_menu .menu_box_1, #icon_toggle_menu .menu_box_2, #icon_toggle_menu .menu_box_3 { height: 33.333vh; min-height: 185px; } #icon_toggle_menu .menu_box_4, #icon_toggle_menu .menu_box_5, #icon_toggle_menu .menu_box_6 { height: 50vh; min-height: 250px; } #icon_toggle_menu .menu_box_4 { padding-top: 12vh; } #icon_toggle_menu .menu_box_5 { padding-top: 10vh; } #icon_toggle_menu .menu_box_6 .limbimg { margin-top: 24px; } #icon_toggle_menu .txt_content { padding-inline: 8%; } } @media screen and (max-width:1024px) { #header { top: 20px } #header .logo { left: 20px; width: 50px } #header .logo img { max-width: 100% } #header .logo svg { right: -40px; bottom: -110px } #header .primary-nav ul li a { font-size: 14px; } #header.sticky_header { padding-top: 0px; } #header::before { height: 110px; } #header.sticky_header .header-right { top: 0px; } #header .header-right { right: 20px } #header .header-right .menubtn { margin: 0 0 0 20px } #header .header-right .h_btnbox { margin-top: 13px } #header .header-right .h_btnbox a { padding: 0 20px; font-size: 14px; height: 34px; line-height: 34px } #header .primary-nav { padding-right: 100px } #header .primary-nav ul { padding-top: 18px } .show_primary_subnav #header .primary-nav { padding-right: 0 } } @media screen and (max-width:991px) { #header { display: none; } } @media screen and (max-width:991px) { #header::before { height: 110px; } #header.sticky_header { padding-top: 0; } #header.sticky_header .header-right { top: 0px; } #livechat { right: 20px } #livechat a { width: 50px; height: 50px } #livechat a span { left: -10px; right: -10px } #livechat a img { max-width: 24px; max-height: 24px } #livechat a svg { width: 100%; height: auto } #header .primary-nav { padding: 0 0 0 50px } #header .primary-nav ul { padding-top: 14px } #header .primary-nav ul li { padding: 0 10px } #header .primary-nav ul li a { font-size: 13px } #header .header-right .h_btnbox { display: none } #header .header-right .menubtn a { width: 50px; height: 50px } #header .header-right .menubtn a svg { width: 100%; height: auto } #header .primary_sub_nav .txt_content { display: none } #header .primary_sub_nav .middle_primary .service_title .header_title { font-size: 36px } } @media screen and (min-width:768px) and (max-width:991px) { .secondry-nav { height: 100vh; overflow: auto; display: -webkit-box; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-direction: normal; -webkit-box-orient: vertical; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .secondry-nav .sec-leftnav { background: #f1f1f1; position: relative; top: auto; left: auto; width: 100%; position: relative } .secondry-nav .sec-leftnav .nav-design-blk .h6 { position: relative; padding: 0 0 10px 0 } .secondry-nav .sec-leftnav .nav-design-blk ul li a { font-weight: 500; font-size: 14px; padding: 4px 0 } .secondry-nav .sec-leftnav .nav-design-blk[data-class*="h_design"]:before { background: #ae0837; background: -webkit-linear-gradient(-45deg, #ae0837 1%, #db4453 100%); background: -webkit-linear-gradient(315deg, #ae0837 1%, #db4453 100%); background: -o-linear-gradient(315deg, #ae0837 1%, #db4453 100%); background: linear-gradient(135deg, #ae0837 1%, #db4453 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ae0837', endColorstr='#db4453', GradientType=1) } .secondry-nav .sec-leftnav .nav-design-blk[data-class*="h_web"] { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2 } .secondry-nav .sec-leftnav .nav-design-blk[data-class*="h_web"]:before { background: #ffa261; background: -webkit-linear-gradient(left, #ffa261 0%, #e9cd6e 100%); background: -webkit-gradient(linear, left top, right top, from(#ffa261), to(#e9cd6e)); background: -o-linear-gradient(left, #ffa261 0%, #e9cd6e 100%); background: linear-gradient(to right, #ffa261 0%, #e9cd6e 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa261', endColorstr='#e9cd6e', GradientType=1) } .secondry-nav .sec-leftnav .nav-design-blk[data-class*="h_mobile"] { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3 } .secondry-nav .sec-leftnav .nav-design-blk[data-class*="h_mobile"]:before { background: #6078ea; background: -webkit-linear-gradient(left, #6078ea 0%, #17ead9 100%); background: -webkit-gradient(linear, left top, right top, from(#6078ea), to(#17ead9)); background: -o-linear-gradient(left, #6078ea 0%, #17ead9 100%); background: linear-gradient(to right, #6078ea 0%, #17ead9 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6078ea', endColorstr='#17ead9', GradientType=1) } .secondry-nav .sec-leftnav .nav-design-blk[data-class*="h_ecommerce"] { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4 } .secondry-nav .sec-leftnav .nav-design-blk[data-class*="h_ecommerce"]:before { background: #00a87f; background: -webkit-linear-gradient(left, #00a87f 0%, #b9d97f 100%); background: -webkit-gradient(linear, left top, right top, from(#00a87f), to(#b9d97f)); background: -o-linear-gradient(left, #00a87f 0%, #b9d97f 100%); background: linear-gradient(to right, #00a87f 0%, #b9d97f 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a87f', endColorstr='#b9d97f', GradientType=1) } .secondry-nav .sec-leftnav .nav-design-blk[data-class*="h_technology"] { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5 } .secondry-nav .sec-leftnav .nav-design-blk[data-class*="h_technology"]:before { background: #a33de4; background: -webkit-linear-gradient(left, #a33de4 0%, #dc78d1 100%); background: -webkit-gradient(linear, left top, right top, from(#a33de4), to(#dc78d1)); background: -o-linear-gradient(left, #a33de4 0%, #dc78d1 100%); background: linear-gradient(to right, #a33de4 0%, #dc78d1 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a33de4', endColorstr='#dc78d1', GradientType=1) } .secondry-nav .sec-leftnav .nav-design-blk[data-class*="h_industry"] { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6 } .secondry-nav .sec-leftnav .nav-design-blk[data-class*="h_industry"]:before { background: #f54ea2; background: -webkit-linear-gradient(left, #f54ea2 0%, #ff7676 100%); background: -webkit-gradient(linear, left top, right top, from(#f54ea2), to(#ff7676)); background: -o-linear-gradient(left, #f54ea2 0%, #ff7676 100%); background: linear-gradient(to right, #f54ea2 0%, #ff7676 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f54ea2', endColorstr='#ff7676', GradientType=1) } .secondry-nav .sec-leftnav .nav-design-blk.active { border-bottom-color: transparent } .secondry-nav .sec-leftnav .nav-design-blk.active .h6 { color: #fff } .secondry-nav .sec-leftnav .nav-design-blk.active .h6:after { -o-transform: rotate(225deg); -webkit-transform: rotate(225deg); transform: rotate(225deg); border-right-color: #fff; border-bottom-color: #fff; top: 22px } .secondry-nav .sec-leftnav .nav-design-blk.active ul { display: block } .secondry-nav .sec-leftnav .nav-design-blk.active:before { opacity: 1 } .secondry-nav .sec-rightnav { left: 100%; width: auto; position: relative; left: auto; top: auto; height: auto; padding: 30px; -ms-flex-positive: 0; -webkit-box-flex: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; -ms-flex-preferred-size: auto; flex-basis: auto } .secondry-nav .sec-rightnav .midd-links { position: relative; top: auto; left: auto; -o-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); width: 100%; display: -webkit-box; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; -moz-align-items: center; align-items: center } .secondry-nav .sec-rightnav .midd-links .imagelogo { width: 50% } .secondry-nav .sec-rightnav .midd-links ul { width: 50%; padding-top: 0 } .secondry-nav .sec-rightnav .midd-links ul li a { font-size: 18px; line-height: 26px } .secondry-nav .sec-rightnav .midd-links ul li:last-child { padding: 0 } } @media screen and (max-width:767px) { #header::before { height: 110px; } .secondry-nav { height: 100vh; bottom: auto; overflow: auto } .secondry-nav .sec-leftnav { width: 100%; height: auto; max-height: none; position: relative; left: auto; right: auto; top: auto; overflow: hidden; display: block; background: none !important; border-top: solid 1px rgba(0, 0, 0, .05) } .secondry-nav .sec-leftnav .nav-design-blk { width: 100%; padding: 0; position: relative; z-index: 1; overflow: hidden; border-bottom: solid 1px rgba(0, 0, 0, .05) } .secondry-nav .sec-leftnav .nav-design-blk .h6 { padding: 7px 20px 7px; color: #000; font-size: 15px; position: relative } .secondry-nav .sec-leftnav .nav-design-blk .h6:after, .secondry-nav .sec-leftnav .nav-design-blk .h6:before { content: ''; position: absolute; width: 18px; height: 2px; background: #555; -o-transition-property: transform; -webkit-transition-property: transform; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: -o-transform; transition-property: transform; transition-property: transform, -webkit-transform, -o-transform; -o-transition-duration: .3s; -webkit-transition-duration: .3s; transition-duration: .3s; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out } .secondry-nav .sec-leftnav .nav-design-blk .h6:after { top: 19px; right: 20px } .secondry-nav .sec-leftnav .nav-design-blk .h6:before { width: 2px; height: 18px; right: 28px; top: 11px } .secondry-nav .sec-leftnav .nav-design-blk ul { display: none; padding: 0 20px 20px 20px } .secondry-nav .sec-leftnav .nav-design-blk ul li a { font-weight: 500; font-size: 14px; padding: 4px 0 } .secondry-nav .sec-leftnav .nav-design-blk:before { content: ''; position: absolute; left: -1px; top: -1px; right: -1px; bottom: -1px; z-index: -1; opacity: 0; -o-transition-property: opacity; -webkit-transition-property: opacity; transition-property: opacity; -o-transition-duration: .3s; -webkit-transition-duration: .3s; transition-duration: .3s; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out } .secondry-nav .sec-leftnav .nav-design-blk[data-class*="uiux"]:before { background: #000; } .secondry-nav .sec-leftnav .nav-design-blk.active { border-bottom-color: transparent } .secondry-nav .sec-leftnav .nav-design-blk.active .h6 { color: #fff } .secondry-nav .sec-leftnav .nav-design-blk.active .h6:before { -o-transform: rotate(270deg); -webkit-transform: rotate(270deg); transform: rotate(270deg); background: #fff } .secondry-nav .sec-leftnav .nav-design-blk.active .h6:after { background: #fff } .secondry-nav .sec-leftnav .nav-design-blk.active ul { display: block } .secondry-nav .sec-leftnav .nav-design-blk.active:before { opacity: 1 } .secondry-nav .sec-leftnav:before { display: none } .secondry-nav .sec-rightnav { width: 100%; position: relative; left: auto; right: auto; top: auto; height: auto } .secondry-nav .sec-rightnav .midd-links { position: relative; left: auto; top: auto; -o-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); padding: 20px 20px 10px } .secondry-nav .sec-rightnav .midd-links .imagelogo { max-width: 130px } .secondry-nav .sec-rightnav .midd-links ul { padding: 10px 0 0 0 } .secondry-nav .sec-rightnav .midd-links ul li a { font-size: 15px; line-height: 22px } .secondry-nav .sec-rightnav .midd-links .imagelogo img { max-width: 40%; } .desktopshow { display: none; } .mobileshow { display: block; background: none !important; } .home_downarrow { display: none } #bottomright { bottom: 65px; left: 80px; right: 80px; text-align: center; display: none } #bottomright a { float: none; display: inline-block; vertical-align: top } #bottomright svg { display: none } #livechat { z-index: 2; right: 15px; top: auto; -o-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); bottom: 60px } #header { top: 15px } #header .logo { width: 40px; left: 15px } #header .logo a { display: block } #header .logo a img { max-width: 100% } #header .logo svg { display: none } #header .primary-nav { display: none } #header .primary_sub_nav { display: none } #header body.show_primary_subnav #header .primary-nav { display: none } #header body.show_primary_subnav #header .primary_sub_nav { display: none } #header .header-right { right: 20px; top: 5px } #header .header-right .menubtn a { width: 26px; height: 26px } #header .header-right .menubtn a svg { display: none } #header:before { bottom: -50px } #header #leftcontact { display: -webkit-box; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -moz-justify-content: center; justify-content: center } #header.sticky_header {} #header.sticky_header .quick_inq_mob { display: block } #bottom_strip .social_icons { padding: 0 } #bottom_strip .social_icons a { height: 40px; width: 40px; margin: 0 2px } #bottom_strip .social_icons a svg { max-width: 22px; max-height: 22px } #bottom_strip .social_icons a .whats_bottom { max-width: 20px; max-height: 20px } #bottom_strip .social_icons:after { display: none } #bottom_strip .live_chat { padding-left: 0 } #bottom_strip .live_chat a { height: 40px; width: 40px; margin: 0 2px } #bottom_strip .live_chat a svg { max-width: 18px; max-height: 18px } #bottom_strip .quick_inq { margin: 0; padding: 0 0 0 10px; display: none } #bottom_strip .quick_inq a { margin: 0; padding: 0 10px; font-size: 11px; height: 22px; line-height: 22px } } #leftcontact { position: absolute; top: 50%; left: 0; margin-left: 30px; -o-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); transform: translate(0, -50%); z-index: 3 } #leftcontact img.elasticleft { position: absolute; left: -30px; top: 50%; -o-transform: translate(0, -50%) scale(0, 1); -webkit-transform: translate(0, -50%) scale(0, 1); transform: translate(0, -50%) scale(0, 1); -webkit-transition: all .3s cubic-bezier(.77, 0, .175, 1) 0s; -o-transition: all .3s cubic-bezier(.77, 0, .175, 1) 0s; transition: all .3s cubic-bezier(.77, 0, .175, 1) 0s; -webkit-transform-origin: left; -o-transform-origin: left; transform-origin: left } #leftcontact a { display: block; width: 60px; height: 60px } #leftcontact a svg { position: absolute; left: 0; top: 0; } #leftcontact a .iconleft { position: absolute; left: 50%; top: 50%; -o-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } #leftcontact a .iconleft path { -webkit-transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s; -o-transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s; transition: all .5s cubic-bezier(.77, 0, .175, 1) 0s } #leftcontact a .round {} #leftcontact a.skypeicon { position: absolute; left: -100px; top: -80px; -webkit-transition: all .3s cubic-bezier(.77, 0, .175, 1) 0s; -o-transition: all .3s cubic-bezier(.77, 0, .175, 1) 0s; transition: all .3s cubic-bezier(.77, 0, .175, 1) 0s } #leftcontact a.hangouticon { position: absolute; left: -100px; top: 80px; -webkit-transition: all .3s cubic-bezier(.77, 0, .175, 1) 0s; -o-transition: all .3s cubic-bezier(.77, 0, .175, 1) 0s; transition: all .3s cubic-bezier(.77, 0, .175, 1) 0s } #leftcontact a.whatsapp { position: absolute; left: -100px; top: 80px; -webkit-transition: all .3s cubic-bezier(.77, 0, .175, 1) 0s; -o-transition: all .3s cubic-bezier(.77, 0, .175, 1) 0s; transition: all .3s cubic-bezier(.77, 0, .175, 1) 0s } #leftcontact:hover {} #leftcontact:hover img.elasticleft { -o-transform: translate(0, -50%) scale(2, 1); -webkit-transform: translate(0, -50%) scale(2, 1); transform: translate(0, -50%) scale(2, 1) } #leftcontact:hover .round { stroke: #000 } #leftcontact:hover .iconleft path { stroke: #000 } #leftcontact:hover .iconleft .fillskype { stroke: none; fill: #000 } #leftcontact:hover .skypeicon .iconleft path+path { stroke: none; fill: #000 } #leftcontact:hover .whatsapp .iconleft path+path { stroke: none; fill: #000 } #leftcontact:hover a.skypeicon, #leftcontact:hover a.hangouticon, #leftcontact:hover a.whatsapp { left: 0 } .home_downarrow { position: absolute; left: 0; bottom: 80px; right: 0; height: 0; z-index: 2; opacity: 0.6; } .home_downarrow a { width: 28px; height: 42px; float: left; margin-top: -21px } @media only screen and (min-device-width:1024px) and (max-device-width:1366px) and (-webkit-min-device-pixel-ratio:1.5) { #leftcontact { z-index: 2; margin-left: 0; left: 20px; top: 170px; bottom: 170px; right: auto; -o-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); text-align: center; display: -webkit-box; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -moz-justify-content: center; justify-content: center; width: auto; -webkit-box-direction: normal; -webkit-box-orient: vertical; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .skypeicon img{ filter: invert(1); } #leftcontact img.elasticleft { display: none } #leftcontact a { position: relative; left: auto; right: auto; margin: 0; top: auto } #leftcontact a .iconleft path { stroke: #fff } #leftcontact a.skypeicon { position: relative; left: auto; right: auto; margin: 10px 0; top: auto } #leftcontact a.skypeicon .iconleft path+path { fill: #fff; stroke: none } #leftcontact a.hangouticon { position: relative; left: auto; right: auto; margin: 0; top: auto } #leftcontact a.whatsapp { position: relative; left: auto; right: auto; margin: 0; top: auto } #leftcontact:hover .round { stroke: #fff } #leftcontact:hover a .iconleft path { stroke: #fff } #leftcontact:hover a.skypeicon .iconleft path+path { fill: #fff; stroke: none } #leftcontact:hover a.whatsapp .iconleft path+path { fill: #fff; stroke: none } } @media screen and (min-width:768px) and (max-width:1199px) { .home_downarrow { z-index: 2 } #leftcontact { z-index: 2; margin-left: 0; left: 20px; top: 100px; bottom: 100px; right: auto; -o-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); text-align: center; display: -webkit-box; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -moz-justify-content: center; justify-content: center; width: auto; -webkit-box-direction: normal; -webkit-box-orient: vertical; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column } #leftcontact img.elasticleft { display: none } #leftcontact a { position: relative; left: auto; right: auto; margin: 0; top: auto } #leftcontact a .iconleft path { stroke: #fff } #leftcontact a.skypeicon { position: relative; left: auto; right: auto; margin: 10px 0; top: auto } #leftcontact a.skypeicon .iconleft path+path { fill: #fff; stroke: none } #leftcontact a.hangouticon { position: relative; left: auto; right: auto; margin: 0; top: auto } #leftcontact a.whatsapp { position: relative; left: auto; right: auto; margin: 0; top: auto } #leftcontact:hover .round { stroke: #fff } #leftcontact:hover a .iconleft path { stroke: #fff } #leftcontact:hover a.skypeicon .iconleft path+path { fill: #fff; stroke: none } #leftcontact:hover a.whatsapp .iconleft path+path { fill: #fff; stroke: none } } @media screen and (max-width:991px) { #leftcontact {} #leftcontact a { width: 50px; height: 50px } #leftcontact a svg { width: 100%; height: auto } .skypeicon img { filter: invert(1); } #leftcontact a svg.iconleft { width: auto; max-width: 24px; max-height: 24px } #leftcontact:hover img.elasticleft { -o-transform: translate(0, -50%) scale(1.7, 1); -webkit-transform: translate(0, -50%) scale(1.7, 1); transform: translate(0, -50%) scale(1.7, 1) } } @media screen and (max-width:767px) { #leftcontact { z-index: 2; margin-left: 0; left: 85px; top: 10px; right: 85px; -o-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); text-align: center; display: -webkit-box; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -moz-justify-content: center; justify-content: center; display: none } #leftcontact img.elasticleft { display: none } #leftcontact a { position: relative; left: auto; right: auto; margin: 0; top: auto; width: 44px; height: 44px } #leftcontact a .iconleft path { stroke: #fff } #leftcontact a.skypeicon { position: relative; left: auto; right: auto; margin: 0 6px; top: auto } #leftcontact a.skypeicon .iconleft path+path { fill: #fff; stroke: none } #leftcontact a.hangouticon { position: relative; left: auto; right: auto; margin: 0; top: auto } #leftcontact a.whatsapp { position: relative; left: auto; right: auto; margin: 0; top: auto } #leftcontact:hover .round { stroke: #fff } #leftcontact:hover a .iconleft path { stroke: #fff } #leftcontact:hover a.skypeicon .iconleft path+path { fill: #fff; stroke: none } } @media screen and (min-width:768px) and (max-width:1199px) { #leftcontact { display: none; } }