/* fonts */ @font-face { font-family: 'open_sanslight'; src: url('../fonts/opensans-light-webfont.woff2') format('woff2'), url('../fonts/opensans-light-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'open_sansregular'; src: url('../fonts/opensans-regular-webfont.woff2') format('woff2'), url('../fonts/opensans-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'robotolight'; src: url('../fonts/roboto-light-webfont.eot'); src: url('../fonts/roboto-light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/roboto-light-webfont.woff') format('woff'), url('../fonts/roboto-light-webfont.ttf') format('truetype'), url('../fonts/roboto-light-webfont.svg#robotolight') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'robotoregular'; src: url('../fonts/roboto-regular-webfont.eot'); src: url('../fonts/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/roboto-regular-webfont.woff2') format('woff2'), url('../fonts/roboto-regular-webfont.woff') format('woff'), url('../fonts/roboto-regular-webfont.ttf') format('truetype'), url('../fonts/roboto-regular-webfont.svg#robotoregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'robotoblack'; src: url('../fonts/roboto-black-webfont.eot'); src: url('../fonts/roboto-black-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/roboto-black-webfont.woff2') format('woff2'), url('../fonts/roboto-black-webfont.woff') format('woff'), url('../fonts/roboto-black-webfont.ttf') format('truetype'), url('../fonts/roboto-black-webfont.svg#robotoblack') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'nexa_boldregular'; src: url('../fonts/nexa_bold-webfont.eot'); src: url('../fonts/nexa_bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/nexa_bold-webfont.woff2') format('woff2'), url('../fonts/nexa_bold-webfont.woff') format('woff'), url('../fonts/nexa_bold-webfont.ttf') format('truetype'), url('../fonts/nexa_bold-webfont.svg#nexa_boldregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'nexa_lightregular'; src: url('../fonts/nexa_light-webfont.eot'); src: url('../fonts/nexa_light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/nexa_light-webfont.woff2') format('woff2'), url('../fonts/nexa_light-webfont.woff') format('woff'), url('../fonts/nexa_light-webfont.ttf') format('truetype'), url('../fonts/nexa_light-webfont.svg#nexa_lightregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'icomoon'; src:url('../fonts/icomoon/icomoon.eot'); src:url('../fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'), url('../fonts/icomoon/icomoon.woff') format('woff'), url('../fonts/icomoon/icomoon.ttf') format('truetype'), url('../fonts/icomoon/icomoon.svg#icomoon') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'gotham_boldregular'; src: url('../fonts/gotham_bold_regular-webfont.woff2') format('woff2'), url('../fonts/gotham_bold_regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } /* main */ .mail_response { color: #e81313 !important; padding-top: 0em !important; display: none; } .form-control.warning,.fourth-block .quick-enq .form-styler.warning{ border-bottom:1px solid #e81313 !important; } #frmenquiry_ss .form-control.warning { border-bottom:1px solid #FFF !important; } #frmenquiry_ss .mail_response { color: #ffbfbf !important; } .contact-form label.warning { animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } } .no-js #loader { display: none; } .js #loader { display: block; position: absolute; left: 100px; top: 0; } .se-pre-con { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999999999; /*background:rgba(9,19,25,0.95);*/ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0f2735+21,091319+100 */ background: #0f2735; /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, #0f2735 21%, #091319 100%); /* FF3.6-15 */ background: -webkit-radial-gradient(center, ellipse cover, #0f2735 21%,#091319 100%); /* Chrome10-25,Safari5.1-6 */ background: radial-gradient(ellipse at center, #0f2735 21%,#091319 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f2735', endColorstr='#091319',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .spinner{ position:absolute; z-index:999; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 100%; text-align: center; } .loader-logo { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .loader-logo .logo-maple { -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); top: 50%; position: absolute; width:100%; color: #FFF; padding: 0 30px; text-align: center; } .loader-logo .logo-maple img{ -webkit-animation: blink 3s infinite ease-in-out; animation: blink 3s infinite ease-in-out; } @keyframes blink { 0% { opacity:.3; } 50% { opacity: 1; } 100% { opacity:.3; } } @-webkit-keyframes blink { 0% { opacity: .3; } 50% { opacity: 1; } 100% { opacity: .3; } } a{ outline:none;} .wrapper{ position:relative; } .heighter{ height:100px; background:#6F3; } .no-pad{ padding:0 !important; } .no-side-pad{ padding-left:0px; padding-right:0px; } .no-side-margin{ margin-left:0px; margin-right:0px; } .full-width-img{ width:100%; height:auto; } /* Row with equal height columns * -------------------------------------------------- */ .row-eq-height { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display:flex; } .header-block{ width:100%; position:absolute; top:0px; z-index:9999; } .header-block .logo{ position:absolute; top:30px; left:44px; } .header-block .menu-holder{ position:absolute; right:20px; top:20px; } .header-block .menu-holder .menu-text { font-family: 'robotoregular'; color: #ffffff; right: 95px; position: absolute; text-transform: uppercase; font-size: 14px; top: 40px; z-index:99999; } .baner-block{ background:#091319; height:100vh; background-size:cover; position:relative; } /* Hang */ @-webkit-keyframes hang { 0% { -webkit-transform: translateY(3px); transform: translateY(3px); opacity:0; } 50% { -webkit-transform: translateY(10px); transform: translateY(10px); opacity:1; } 100% { -webkit-transform: translateY(3px); transform: translateY(3px); opacity:0; } } @keyframes hang { 0% { -webkit-transform: translateY(3px); transform: translateY(3px); opacity:0; } 50% { -webkit-transform: translateY(10px); transform: translateY(10px); opacity:1; } 100% { -webkit-transform: translateY(3px); transform: translateY(3px); opacity:0; } } .baner-block .arrow-down{ width:33px; position:absolute; right:33px; bottom:45px; z-index:999999999; -webkit-transform: translateY(10px); transform: translateY(10px); -webkit-animation-name: hang; animation-name: hang; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; } .baner-block .arrow-down img{ width:100%; height:auto; } .baner-block .sky-holder{ width:100%; height:100%; position:absolute; background:#091319; z-index:9; } @keyframes move-twink-back { from {background-position:0 0;} to {background-position:-10000px 5000px;} } @-webkit-keyframes move-twink-back { from {background-position:0 0;} to {background-position:-10000px 5000px;} } @-moz-keyframes move-twink-back { from {background-position:0 0;} to {background-position:-10000px 5000px;} } @-ms-keyframes move-twink-back { from {background-position:0 0;} to {background-position:-10000px 5000px;} } @keyframes move-clouds-back { from {background-position:0 0;} to {background-position:10000px 0;} } @-webkit-keyframes move-clouds-back { from {background-position:0 0;} to {background-position:10000px 0;} } @-moz-keyframes move-clouds-back { from {background-position:0 0;} to {background-position:10000px 0;} } @-ms-keyframes move-clouds-back { from {background-position: 0;} to {background-position:10000px 0;} } .stars, .twinkling, .clouds { position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; display:block; } .stars { background:#09141b url(../img/stars.png) repeat top center; z-index:0; } .twinkling{ background:transparent url(../img/twinkling.png) repeat top center; z-index:1; -moz-animation:move-twink-back 200s linear infinite; -ms-animation:move-twink-back 200s linear infinite; -o-animation:move-twink-back 200s linear infinite; -webkit-animation:move-twink-back 200s linear infinite; animation:move-twink-back 200s linear infinite; } .clouds{ background:transparent url(../img/clouds.png) repeat top center; z-index:3; -moz-animation:move-clouds-back 200s linear infinite; -ms-animation:move-clouds-back 200s linear infinite; -o-animation:move-clouds-back 200s linear infinite; -webkit-animation:move-clouds-back 200s linear infinite; animation:move-clouds-back 200s linear infinite; } .baner-block .leaves-holder{ position:absolute; width:100%; height:100%; z-index:999; } .baner-block .leaves-holder .leaf-1{ position:absolute; left:10%; bottom:12%; z-index:999; width:15.7%; height:auto; -webkit-animation-name: leaf-anim-1; -webkit-animation-duration: 8s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-name: leaf-anim-1; -moz-animation-duration: 8s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: ease-in-out; } @-webkit-keyframes leaf-anim-1{ from {-webkit-transform:translate(0, 0px); opacity:0.5;} 55% {-webkit-transform:translate(15px, 25px); opacity:0.8;} 75% {-webkit-transform:translate(5px, 25px); opacity:0.95;} to {-webkit-transform: translate(0, -0px); opacity:0.5;} } @-moz-keyframes leaf-anim-1{ from {-moz-transform:translate(0, 0px); opacity:0.5;} 55% {-moz-transform:translate(15px, 25px); opacity:0.8;} 75% {-moz-transform:translate(5px, 25px); opacity:0.95;} to {-moz-transform: translate(0, -0px); opacity:0.5;} } .baner-block .leaves-holder .leaf-2{ position:absolute; left:2%; bottom:50%; z-index:999; width:8%; height:auto; -webkit-animation-name: leaf-anim-2; -webkit-animation-duration: 10s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-name: leaf-anim-2; -moz-animation-duration: 10s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: ease-in-out; } @-webkit-keyframes leaf-anim-2{ from {-webkit-transform: scale(1); -webkit-transform:translate(0, 0px); opacity:0.46;} 25% {-webkit-transform: scale(0.5); -webkit-transform:translate(8px, 0px); opacity:0.65;} 55% {-webkit-transform: scale(0.8); -webkit-transform:translate(-15px, 8px); opacity:0.25;} 75% {-webkit-transform: scale(0.3); -webkit-transform:translate(5px, 2px); opacity:0.15;} to {-webkit-transform: scale(1); -webkit-transform: translate(0, -0px); opacity:0.46;} } @-moz-keyframes leaf-anim-2{ from {-moz-transform: scale(1); -moz-transform:translate(0, 0px); opacity:0.46;} 25% {-moz-transform: scale(0.5); -moz-transform:translate(8px, 0px); opacity:0.65;} 55% {-moz-transform: scale(0.8); -moz-transform:translate(-15px, 8px); opacity:0.25;} 75% {-moz-transform: scale(0.3); -moz-transform:translate(5px, 2px); opacity:0.15;} to {-moz-transform: scale(1); -moz-transform: translate(0, -0px); opacity:0.46;} } .baner-block .leaves-holder .leaf-3{ position:absolute; left:27%; top:-7%; z-index:999; width:8.65%; height:auto; -webkit-animation-name: leaf-anim-3; -webkit-animation-duration: 12s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-name: leaf-anim-3; -moz-animation-duration: 12s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: ease-in-out; } @-webkit-keyframes leaf-anim-3{ from {-webkit-transform: scale(1); -webkit-transform:translate(0, 0px); opacity:0.42;} 10% {-webkit-transform: scale(0.8); -webkit-transform:translate(8px, 0px); opacity:0.8;} 55% {-webkit-transform: scale(1); -webkit-transform:translate(-30px, 5px); opacity:0.33;} 80% {-webkit-transform: scale(0.3); -webkit-transform:translate(10px, 15px); opacity:0.24;} to {-webkit-transform: scale(1); -webkit-transform: translate(0, 0px); opacity:0.42;} } @-moz-keyframes leaf-anim-3{ from {-moz-transform: scale(1); -moz-transform:translate(0, 0px); opacity:0.42;} 10% {-moz-transform: scale(0.8); -moz-transform:translate(8px, 0px); opacity:0.8;} 55% {-moz-transform: scale(1); -moz-transform:translate(-30px, 5px); opacity:0.33;} 80% {-moz-transform: scale(0.3); -moz-transform:translate(10px, 15px); opacity:0.24;} to {-moz-transform: scale(1); -moz-transform: translate(0, 0px); opacity:0.42;} } .baner-block .leaves-holder .leaf-4{ position:absolute; right:30%; top:9%; z-index:999; width:7.65%; height:auto; -webkit-animation-name: leaf-anim-4; -webkit-animation-duration: 9s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-name: leaf-anim-4; -moz-animation-duration: 9s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: ease-in-out; } @-webkit-keyframes leaf-anim-4{ from {-webkit-transform:translate(0, 0px); opacity:0.82;} 55% {-webkit-transform:translate(-8px, 3px); opacity:0.95;} 75% {-webkit-transform:translate(10px, -9px); opacity:0.3;} to {-webkit-transform: translate(0, -0px); opacity:0.82;} } @-moz-keyframes leaf-anim-4{ from {-moz-transform:translate(0, 0px); opacity:0.82;} 55% {-moz-transform:translate(-8px, 3px); opacity:0.95;} 75% {-moz-transform:translate(10px, -9px); opacity:0.3;} to {-moz-transform: translate(0, -0px); opacity:0.82;} } .baner-block .leaves-holder .leaf-5{ position: absolute; right: 13%; top: 34%; z-index: 999; width: 13.85%; height: auto; -webkit-animation-name: leaf-anim-5; -webkit-animation-duration: 10s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-name: leaf-anim-5; -moz-animation-duration: 10s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: ease-in-out; } @-webkit-keyframes leaf-anim-5{ from {-webkit-transform: scale(1); -webkit-transform:translate(0, 0px); opacity:0.7;} 25% {-webkit-transform: scale(0.2); -webkit-transform:translate(8px, 5px); opacity:0.4;} 55% {-webkit-transform: scale(0.8); -webkit-transform:translate(-9px, 4px); opacity:0.6;} 75% {-webkit-transform: scale(1.3); -webkit-transform:translate(0px, 9px); opacity:0.9;} to {-webkit-transform: scale(1); -webkit-transform: translate(0, -0px); opacity:0.7;} } @-moz-keyframes leaf-anim-5{ from {-moz-transform: scale(1); -moz-transform:translate(0, 0px); opacity:0.7;} 25% {-moz-transform: scale(0.2); -moz-transform:translate(8px, 5px); opacity:0.4;} 55% {-moz-transform: scale(0.8); -moz-transform:translate(-9px, 4px); opacity:0.6;} 75% {-moz-transform: scale(1.3); -moz-transform:translate(0px, 9px); opacity:0.9;} to {-moz-transform: scale(1); -moz-transform: translate(0, -0px); opacity:0.7;} } .baner-block .leaves-holder .leaf-6{ position: absolute; right: 5%; bottom: 7%; z-index: 999; width: 16.7%; height: auto; -webkit-animation-name: leaf-anim-6; -webkit-animation-duration: 12s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-name: leaf-anim-6; -moz-animation-duration: 12s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: ease-in-out; } @-webkit-keyframes leaf-anim-6{ from {-webkit-transform:translate(0, 0px); opacity:1;} 25% {-webkit-transform:translate(-5px, 20px); opacity:0.65;} 65% {-webkit-transform:translate(-30px, 35px); opacity:0.40;} to {-webkit-transform: translate(0, -0px); opacity:1;} } @-moz-keyframes leaf-anim-6{ from {-moz-transform:translate(0, 0px); opacity:1;} 25% {-moz-transform:translate(-5px, 20px); opacity:0.65;} 65% {-moz-transform:translate(-30px, 35px); opacity:0.40;} to {-moz-transform: translate(0, -0px); opacity:1;} } .baner-block .leaves-holder .leaf-7{ position: absolute; right: 0%; top: 18%; z-index: 999; width: 8.2%; height: auto; -webkit-animation-name: leaf-anim-7; -webkit-animation-duration: 9s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-name: leaf-anim-7; -moz-animation-duration: 9s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: ease-in-out; } @-webkit-keyframes leaf-anim-7{ from {-webkit-transform:translate(0, 0px); opacity:0.35;} 33% {-webkit-transform:translate(0px, 9px); opacity:0.5;} 76% {-webkit-transform:translate(0px, -3px); opacity:0.35;} to {-webkit-transform: translate(0, -0px); opacity:0.35;} } @-moz-keyframes leaf-anim-7{ from {-moz-transform:translate(0, 0px); opacity:0.35;} 33% {-moz-transform:translate(0px, 9px); opacity:0.5;} 76% {-moz-transform:translate(0px, -3px); opacity:0.35;} to {-moz-transform: translate(0, -0px); opacity:0.35;} } .baner-block .leaves-holder .brand-name{ width:80%; height:auto; position:absolute; z-index:99; top:50%; left:50%; transform:translate(-50%, -50%); opacity:0.04; -webkit-animation-name: brand-anim; -webkit-animation-duration: 9s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-name: brand-anim; -moz-animation-duration: 9s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: ease-in-out; } @-webkit-keyframes brand-anim{ from {opacity:0.04;} 50% {opacity:0.03;} to {opacity:0.04;} } @-moz-keyframes leaf-anim-7{ from {opacity:0.04;} 50% {opacity:0.03;} to {opacity:0.04;} } .baner-block .dot-line{ width:615px; height:50px; background:url(../img/dot-line.png) repeat-x center; position:absolute; z-index:9980; -moz-transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); left:50%; top:50%; } .baner-block .slider-circle{ border: 2px solid #ffffff; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; border-top: 2px solid #ba090b; width:11vw; height:11vw; min-width: 113px; min-height: 113px; /*-moz-animation: spin 3.5s linear infinite; -webkit-animation: spin 3.5s linear infinite; animation: spin 3.5s linear infinite;*/ position:absolute; z-index:9999; -moz-transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); left:50%; top:50%; /*-moz-transform-origin:top left; -webkit-transform-origin:top left; transform-origin:top left;*/ } @-moz-keyframes spin { 0% { -moz-transform: rotate(0deg) -moz-translate(-50%, -50%); } 100% { -moz-transform: rotate(360deg) -moz-translate(-50%, -50%); } } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg) -wbkit-translate(-50%, -50%); } 100% { -webkit-transform: rotate(360deg) -wbkit-translate(-50%, -50%); } } @keyframes spin { 0% { transform: rotate(0deg) translate(-50%, -50%); } 100% { transform: rotate(360deg) translate(-50%, -50%); } } .baner-block .slider_image { position: absolute; z-index: 999999; overflow: hidden; -moz-transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); left:50%; top:50%; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; } .slider_image { position: absolute; z-index: 12000; overflow: hidden; top: 40%; left: 50%; -moz-transform:translateY(-50%) translateX(-50%); -webkit-transform:translateY(-50%) translateX(-50%); transform:translateY(-50%) translateX(-50%); -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; min-height:90px; min-width:90px; width:9.4vw; height:9.4vw; } .slider_image ul { position: relative; margin: 0; padding: 0; list-style: none; } .slider_image ul li { position: relative; display: block; float: left; margin: 0; padding: 0; min-height:90px; min-width:90px; width:9.4vw; height:9.4vw; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; overflow: hidden; text-align: center; transition: all 1s; } .slider_image ul li img { -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; display: none; width:100%; height:100%; } .slider_image ul li.active img { display: block; -webkit-animation-name: fade-scale-in; -webkit-animation-duration: .5s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease-in-out; -moz-animation-name: fade-scale-in; -moz-animation-duration: .5s; -moz-animation-iteration-count: 1; -moz-animation-timing-function: ease-in-out; } @-webkit-keyframes fade-scale-in { 50% { -webkit-transform: scale(0.9); transform: scale(0.9); opacity:0.5; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity:1; } } @-moz-keyframes fade-scale-in { 50% { -moz-transform: scale(0.9); transform: scale(0.9); opacity:0.5; } 100% { -moz-transform: scale(1); transform: scale(1); opacity:1; } } @keyframes fade-scale-in { 50% { -webkit-transform: scale(0.9); transform: scale(0.9); opacity:0.5; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity:1; } } .slider_caption { max-width:700px; position: absolute; z-index: 1000; overflow: hidden; bottom:6%; left:50%; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); transform:translateX(-50%); } .slider_caption ul { position: relative; margin: 0; padding: 0; list-style: none; } .slider_caption ul li { position: relative; display: none; float: left; margin: 0; padding: 0; width: 100%; overflow: hidden; text-align: center; transition: all 1s; } .slider_caption ul li.active { display: block; -webkit-animation-name: caption-fade-in; -webkit-animation-duration:0.5s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease-in-out; -moz-animation-name: caption-fade-in; -moz-animation-duration: 0.5s; -moz-animation-iteration-count: 1; -moz-animation-timing-function: ease-in-out; } @-webkit-keyframes caption-fade-in { 0% { opacity:0; -webkit-transform: scale(0.9); transform: scale(0.9); } 100% { opacity:1; -webkit-transform: scale(1); transform: scale(1); } } @-moz-keyframes caption-fade-in { 0% { opacity:0; -moz-transform: scale(0.9); transform: scale(0.9); } 100% { opacity:1; -moz-transform: scale(1); transform: scale(1); } } @keyframes caption-fade-in { 0% { opacity:0; -webkit-transform: scale(0.9); transform: scale(0.9); } 100% { opacity:1; -webkit-transform: scale(1); transform: scale(1); } } .slider_caption ul li h1{ font-family: 'nexa_boldregular'; font-size:72px; line-height:60px; color:#ffffff; } .slider_caption ul li h1 span{ color:#ff1414; } a.control_prev, a.control_next { text-align:center; position: absolute; border:1px solid #ffffff; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index: 11000; display: block; padding: 12px; width: 50px; height: 50px; color: #fff; text-decoration: none; cursor: pointer; opacity: 0.5; -moz-transition: all .5s all linear; -webkit-transition: all .5s all linear; transition: all .5s all linear; } a.control_prev:hover, a.control_next:hover { opacity: 1; } /* Icon Wobble Horizontal */ @-webkit-keyframes hvr-icon-wobble-horizontal { 16.65% { -webkit-transform: translateX(6px); transform: translateX(6px); } 33.3% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 49.95% { -webkit-transform: translateX(4px); transform: translateX(4px); } 66.6% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 83.25% { -webkit-transform: translateX(1px); transform: translateX(1px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes hvr-icon-wobble-horizontal { 16.65% { -webkit-transform: translateX(6px); transform: translateX(6px); } 33.3% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 49.95% { -webkit-transform: translateX(4px); transform: translateX(4px); } 66.6% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 83.25% { -webkit-transform: translateX(1px); transform: translateX(1px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } a.control_prev { left:12%; } a.control_prev:hover img{ -webkit-animation-name: hvr-icon-wobble-horizontal; animation-name: hvr-icon-wobble-horizontal; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } a.control_next { right:12%; } a.control_next:hover img{ -webkit-animation-name: hvr-icon-wobble-horizontal; animation-name: hvr-icon-wobble-horizontal; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .slider_option { position: relative; margin: 10px auto; width: 160px; font-size: 18px; } .baner-block .outer-circle-1{ border: 2px solid #ffffff; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; min-width: 134px; min-height: 134px; width: 12.7vw; height: 12.7vw; position:absolute; z-index:9999; -moz-transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); left:50%; top:50%; opacity:0; animation-direction: alternate; -webkit-animation-name: fade-in-circle-1; -webkit-animation-duration: 5s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-name: fade-in-circle-1; -moz-animation-duration: 5s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: ease-in-out; -moz-animation-delay:.2s; -webkit-animation-delay:.2s; animation-delay:.2s; } @-webkit-keyframes fade-in-circle-1{ from {opacity:0;} 50% {opacity:0.6;} to {opacity:0;} } @-moz-keyframes fade-in-circle-1{ from {opacity:0;} 50% {opacity:0.6;} to {opacity:0;} } @keyframes fade-in-circle-1{ from {opacity:0;} 50% {opacity:0.6;} to {opacity:0;} } .baner-block .outer-circle-2{ border: 1px solid #ffffff; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; min-width: 154px; min-height: 154px; width: 14.3vw; height: 14.3vw; animation-direction: alternate; opacity:0; position:absolute; z-index:9999; -moz-transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); left:50%; top:50%; -webkit-animation-name: fade-in-circle-2; -webkit-animation-duration: 5s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-name: fade-in-circle-2; -moz-animation-duration: 5s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: ease-in-out; -moz-animation-delay:.5s; -webkit-animation-delay:.5s; animation-delay:.5s; } @-webkit-keyframes fade-in-circle-2{ from {opacity:0;} 50% {opacity:0.38;} to {opacity:0;} } @-moz-keyframes fade-in-circle-2{ from {opacity:0;} 50% {opacity:0.38;} to {opacity:0;} } @keyframes fade-in-circle-2{ from {opacity:0;} 50% {opacity:0.38;} to {opacity:0;} } .baner-block .outer-circle-3{ border: 1px solid #ffffff; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; min-width: 175px; min-height: 175px; width: 15.9vw; height: 15.9vw; animation-direction: alternate; opacity:0; position:absolute; z-index:9999; -moz-transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); left:50%; top:50%; -webkit-animation-name: fade-in-circle-3; -webkit-animation-duration: 5s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-name: fade-in-circle-3; -moz-animation-duration: 5s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: ease-in-out; -moz-animation-delay:.8s; -webkit-animation-delay:.8s; animation-delay:.8s; } @-webkit-keyframes fade-in-circle-3{ from {opacity:0;} 50% {opacity:0.2;} to {opacity:0;} } @-moz-keyframes fade-in-circle-3{ from {opacity:0;} 50% {opacity:0.2;} to {opacity:0;} } @keyframes fade-in-circle-3{ from {opacity:0;} 50% {opacity:0.2;} to {opacity:0;} } .baner-block .outer-circle-4{ border: 1px solid #ffffff; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; min-width: 197px; min-height: 197px; width: 17.5vw; height: 17.5vw; animation-direction: alternate; opacity:0; position:absolute; z-index:9999; -moz-transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); left:50%; top:50%; -webkit-animation-name: fade-in-circle-4; -webkit-animation-duration: 5s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-name: fade-in-circle-4; -moz-animation-duration: 5s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: ease-in-out; -moz-animation-delay:1.1s; -webkit-animation-delay:1.1s; animation-delay:1.1s; } @-webkit-keyframes fade-in-circle-4{ from {opacity:0;} 50% {opacity:0.16;} to {opacity:0;} } @-moz-keyframes fade-in-circle-4{ from {opacity:0;} 50% {opacity:0.16;} to {opacity:0;} } @keyframes fade-in-circle-4{ from {opacity:0;} 50% {opacity:0.16;} to {opacity:0;} } .first-block{ background:#ffffff; padding:4em 3em; } .first-block .first-part{ padding-bottom:3em; } .first-block .welcome-part{ padding-bottom:1.5em; } .first-block .welcome-part h1{ text-align:left; font-size:23px; line-height:29px; font-family: 'nexa_boldregular'; margin:0px; color:#000000; position:relative; margin-bottom:18px; text-transform:uppercase; letter-spacing:4px; } .first-block .welcome-part h1 span{ color:#ff1414; } .first-block .welcome-part h1:after { margin-top:10px; background: #ff1414; content: ""; display: block; height: 3px; width:65px; } .first-block .welcome-part p{ font-size: 14px; line-height: 18px; color:#a4a1a1; text-align:left; font-family: 'open_sansregular'; padding-bottom:20px; text-align:justify; } .first-block .read-more{ float:left; text-decoration:none; color:#000000; font-family: 'robotoblack'; font-size:13px; letter-spacing:6px; padding:15px 30px; border:1px solid #000000; text-transform:uppercase; position:relative; z-index:1; -moz-transition:all .3s; -webkit-transition:all .3s; transition:all .3s; } .first-block .read-more:before{ position:absolute; left:0px; top:0px; height:100%; content:""; width:0px; background:#ff1414; z-index:-1; -moz-transition: all .7s; -o-transition: all .7s; -ms-transition: all .7s; -webkit-transition: all .7s; transition: all .7s; } .first-block .read-more:after{ font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; position: relative; -webkit-font-smoothing: antialiased; content: "\e00d"; } .first-block .read-more:hover{ text-decoration:none; color:#ffffff; border:1px solid #ff1414; } .first-block .read-more:focus{ text-decoration:none; color:#000000; } .first-block .read-more:hover:before{ width:100%; } .special-holder{ display:inline-flex; } .first-block .video-thumb{ position:relative; background:url(../img/video-thumb.jpg) center no-repeat; background-size:cover; min-height:25vw; height:100%; } .first-block .video-thumb .play{ position:absolute; -moz-transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); left:50%; top:50%; } .first-block .video-thumb .play .play-button{ width:80px; height:80px; cursor:pointer; opacity:0.28; -moz-transition:opacity .4s cubic-bezier(0.18, 0.89, 0.32, 1.28); -webkit-transition:opacity .4s cubic-bezier(0.18, 0.89, 0.32, 1.28); transition:opacity .4s cubic-bezier(0.18, 0.89, 0.32, 1.28); } .first-block .video-thumb .play .play-button:hover{ opacity:0.9; } .first-block .video-thumb img{ width:100%; height:auto; } .first-block .video-thumb:before{ position:absolute; content:""; display:block; width:100%; height:100%; background:rgba(0,0,0,0.39); -moz-transition:background .3s; -webkit-transition:background .3s; transition:background .3s; } .first-block .video-thumb:hover:before{ background:rgba(0,0,0,0.60); } .first-block .seo-score{ background:#e30202; padding:30px; min-height:25vw; } .first-block .seo-score h4{ text-align:left; font-size:15px; line-height:18x; font-family: 'nexa_boldregular'; margin:0px; color:#ffffff; position:relative; margin-bottom:15px; text-transform:uppercase; letter-spacing:3px; } .first-block .seo-score h4:after { margin-top:10px; background: #ffffff; content: ""; display: block; height: 3px; width:62px; } .first-block .seo-score .form-group { margin-bottom: 7px; } .first-block .seo-score .form-styler{ background:none !important; height:auto !important; color:#ffffff; border:1px solid #1c1c1b; padding:8px 0px !important; border-radius:0px !important; border:none; border-bottom:1px solid #f75c5c; font-family: 'open_sanslight'; font-size:14px; box-shadow: none !important; -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; } .first-block .seo-score .form-styler::-moz-placeholder{color:#ffffff !important;opacity:1} .first-block .seo-score .form-styler:-ms-input-placeholder{color:#ffffff !important} .first-block .seo-score .form-styler::-webkit-input-placeholder{color:#ffffff !important} .first-block .seo-score .form-styler:focus{ border-bottom:1px solid #ffffff; } .first-block .seo-score .btn-holder{ margin-top:18px; } .first-block .seo-score .generate-button{ float:right; text-decoration:none; color:#ffffff; font-family: 'nexa_boldregular'; font-size:12px; letter-spacing:4px; border: none; background:none; text-transform:uppercase; position:relative; } .first-block .seo-score .generate-button span{ margin-top:-12px; } .first-block .seo-score .generate-button:after{ font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; position: relative; -webkit-font-smoothing: antialiased; content: "\e00d"; padding-left:10px; font-size:18px; } .first-block .seo-score .generate-button:hover{ text-decoration:none; color:#ffffff; } .first-block .seo-score .generate-button:focus{ text-decoration:none; color:#000000; outline:none !important; } .first-block .services-part{ display:inline-flex; } .first-block .services-part > div { /*cursor: pointer;*/ } .view-more{ color:#423F3F; font-size:12px; letter-spacing:2px; text-transform:uppercase; } .view-more:hover{ color:#e30202; } a:focus{ text-decoration:none !important;} .first-block .services-part .icon{ padding-bottom:10px; width:100%; text-align:left; } .first-block .services-part > div .service-icon{ width:13vh; height:auto; min-width:60px; min-height:55px; fill:#B7B5B5; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; transition: all .3s linear; } .first-block .services-part > div .service-icon .stroke_color{ stroke:#B7B5B5; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; transition: all .3s linear; } .first-block .services-part > div:hover .service-icon{ fill:#e30202; } .first-block .services-part > div:hover .service-icon .stroke_color{ stroke:#e30202; } .first-block .services-part > div:hover .service-icon.web_browser_svg .svg_animation{ -webkit-animation-name: dot_animation; -webkit-animation-duration: .8s; -webkit-animation-timing-function: ease-in-out; -moz-animation-name: dot_animation; -moz-animation-duration: .8s; -moz-animation-timing-function: ease-in-out; -moz-animation-fill-mode: both; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .first-block .services-part > div:hover .service-icon.web_browser_svg .dot_one{ -webkit-animation-delay: 0s; /* Chrome, Safari, Opera */ animation-delay: 0s; } .first-block .services-part > div:hover .service-icon.web_browser_svg .dot_two{ -webkit-animation-delay: .3s; /* Chrome, Safari, Opera */ animation-delay: .3s; } .first-block .services-part > div:hover .service-icon.web_browser_svg .dot_three{ -webkit-animation-delay: .6s; /* Chrome, Safari, Opera */ animation-delay: .6s; } @-webkit-keyframes dot_animation { 0% { opacity:0; -moz-transition: opacity .5s linear; -webkit-transition: opacity .5s linear; transition: opacity .5s linear; } 100% { opacity:1; } } @-moz-keyframes dot_animation { 0% { opacity:0; -moz-transition: opacity .5s linear; -webkit-transition: opacity .5s linear; transition: opacity .5s linear; } 100% { opacity:1; } } @keyframes dot_animation { 0% { opacity:0; -moz-transition: opacity .5s linear; -webkit-transition: opacity .5s linear; transition: opacity .5s linear; } 100% { opacity:1; } } .first-block .services-part > div:hover .service-icon.graph_svg .arrow_polygon{ opacity:0; -moz-transition: opacity .5s linear; -webkit-transition: opacity .5s linear; transition: opacity .5s linear; -webkit-animation-name: svg_arrow; -webkit-animation-duration: .8s; -webkit-animation-timing-function: ease-in-out; -moz-animation-name: svg_arrow; -moz-animation-duration: .8s; -moz-animation-timing-function: ease-in-out; -moz-animation-fill-mode: both; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0s; /* Chrome, Safari, Opera */ animation-delay: 0s; } @-webkit-keyframes svg_arrow { 0% { opacity:0; -moz-transform: translateX(-5px) translateY(5px) ; -webkit-transform: translateX(-5px) translateY(5px) ; transform: translateX(-5px) translateY(5px) ; } 100% { opacity:1; -moz-transform: translateX(0px) translateY(0px) ; -webkit-transform: translateX(0px) translateY(0px) ; transform: translateX(0px) translateY(0px) ; } } @-moz-keyframes svg_arrow { 0% { opacity:0; -moz-transform: translateX(-5px) translateY(5px) ; -webkit-transform: translateX(-5px) translateY(5px) ; transform: translateX(-5px) translateY(5px) ; } 100% { opacity:1; -moz-transform: translateX(0px) translateY(0px) ; -webkit-transform: translateX(0px) translateY(0px) ; transform: translateX(0px) translateY(0px) ; } } @keyframes svg_arrow { 0% { opacity:0; -moz-transform: translateX(-5px) translateY(5px) ; -webkit-transform: translateX(-5px) translateY(5px) ; transform: translateX(-5px) translateY(5px) ; } 100% { opacity:1; -moz-transform: translateX(0px) translateY(0px) ; -webkit-transform: translateX(0px) translateY(0px) ; transform: translateX(0px) translateY(0px) ; } } .first-block .services-part > div:hover .service-icon.mobile_svg .svg_animation{ -webkit-animation-name: range_animation; -webkit-animation-duration: .8s; -webkit-animation-timing-function: ease-in-out; -moz-animation-name: range_animation; -moz-animation-duration: .8s; -moz-animation-timing-function: ease-in-out; -moz-animation-fill-mode: both; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .first-block .services-part > div:hover .service-icon.mobile_svg .wave_one{ -webkit-animation-delay: 0s; /* Chrome, Safari, Opera */ animation-delay: 0s; } .first-block .services-part > div:hover .service-icon.mobile_svg .wave_two{ -webkit-animation-delay: .3s; /* Chrome, Safari, Opera */ animation-delay: .3s; } @-webkit-keyframes range_animation { 0% { opacity:0; -moz-transform: translateX(-2px); -webkit-transform: translateX(-2px); transform: translateX(-2px); } 100% { opacity:1; -moz-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); } } @-moz-keyframes range_animation { 0% { opacity:0; -moz-transform: translateX(-2px); -webkit-transform: translateX(-2px); transform: translateX(-2px); } 100% { opacity:1; -moz-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); } } @keyframes range_animation { 0% { opacity:0; -moz-transform: translateX(-2px); -webkit-transform: translateX(-2px); transform: translateX(-2px); } 100% { opacity:1; -moz-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); } } .first-block .services-part > div:hover .service-icon.mobile_svg .stroke_color{ -webkit-animation-name: mobile_button_animation; -webkit-animation-duration: .8s; -webkit-animation-timing-function: ease-in-out; -moz-animation-name: mobile_button_animation; -moz-animation-duration: .8s; -moz-animation-timing-function: ease-in-out; -moz-animation-fill-mode: both; -webkit-animation-fill-mode: both; animation-fill-mode: both; transform-origin: top right; } @-webkit-keyframes mobile_button_animation { 0% { opacity:0; -moz-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); } 50% { opacity:0; -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { opacity:1; -moz-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } } @-moz-keyframes mobile_button_animation { 0% { opacity:0; -moz-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); } 50% { opacity:0; -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { opacity:1; -moz-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } } @keyframes mobile_button_animation { 0% { opacity:0; -moz-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); } 50% { opacity:0; -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { opacity:1; -moz-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } } .first-block .services-part > div:hover .service-icon.cloud_svg .arrow_icon{ opacity:0; -moz-transition: opacity .5s linear; -webkit-transition: opacity .5s linear; transition: opacity .5s linear; -webkit-animation-name: arrow_animation; -webkit-animation-duration: .8s; -webkit-animation-timing-function: ease-in-out; -moz-animation-name: arrow_animation; -moz-animation-duration: .8s; -moz-animation-timing-function: ease-in-out; -moz-animation-fill-mode: both; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0s; /* Chrome, Safari, Opera */ animation-delay: 0s; } @-webkit-keyframes arrow_animation { 0% { opacity:0; -moz-transform: translateY(2px); -webkit-transform: translateY(2px); transform: translateY(2px); } 100% { opacity:1; -moz-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } } @-moz-keyframes arrow_animation { 0% { opacity:0; -moz-transform: translateY(2px); -webkit-transform: translateY(2px); transform: translateY(2px); } 100% { opacity:1; -moz-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } } @keyframes arrow_animation { 0% { opacity:0; -moz-transform: translateY(2px); -webkit-transform: translateY(2px); transform: translateY(2px); } 100% { opacity:1; -moz-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } } .first-block .services-part > div .total-item{ position:relative; height:100%; border-bottom: 5px solid #e30202; padding-bottom:10px; } .first-block .services-part h3{ font-family: 'robotoregular'; color:#000000; font-size:22px; margin:0px; padding-bottom:20px; text-align:left; } .first-block .services-part p{ font-size: 15px; line-height: 18px; color:#a4a1a1; text-align:left; font-family: 'open_sansregular'; padding-bottom:8px; margin:0px; text-align:justify; } .second-block{ background:#ffffff; padding:0 3em 3em; } .second-block h2{ text-align: center; font-size: 23px; line-height: 29px; font-family: 'nexa_boldregular'; margin: 0px; color: #000000; position: relative; margin-bottom: 30px; text-transform: uppercase; letter-spacing: 4px; } .second-block h2:after{ content:""; display:block; position:absolute; width:60px; height:3px; background:#ff1414; transform:translateX(-50%); left:50%; margin-top:10px; } .second-block p{ font-size: 15px; line-height: 18px; color:#a4a1a1; text-align: center; font-family: 'open_sansregular'; padding-bottom:40px; max-width:920px; margin:0 auto; } .second-block .projects-block{ background:#dc0a0a; height:393px; position:relative; } .second-block .projects-block .pic-part{ width:50%; height:100%; background:#061219; float:left; position:relative; overflow:hidden !important; } .second-block .projects-block .pic-part ul{ margin:0px !important; display: block !important; list-style-type: disc !important; margin-before: 0px !important; margin-after: 0px !important; margin-start: 0px !important; margin-end: 0px !important; padding-start: 0px !important; -webkit-margin-before: 0px !important; -webkit-margin-after: 0px !important; -webkit-margin-start: 0px !important; -webkit-margin-end: 0px !important; -webkit-padding-start: 0px !important; -ms-margin-before: 0px !important; -ms-margin-after: 0px !important; -ms-margin-start: 0px !important; -ms-margin-end: 0px !important; -ms-padding-start: 0px !important; -moz-margin-before: 0px !important; -moz-margin-after: 0px !important; -moz-margin-start: 0px !important; -moz-margin-end: 0px !important; -moz-padding-start: 0px !important; -o-margin-before: 0px !important; -o-margin-after: 0px !important; -o-margin-start: 0px !important; -o-margin-end: 0px !important; -o-padding-start: 0px !important; } .second-block .projects-block .pic-part ul li{ list-style:none; display:block; overflow:hidden !important; } .second-block .projects-block .pic-part ul li img{ width:100%; height:100%; /*position:absolute;*/ opacity:0; -webkit-animation-name: fade-scale-out-pic; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease-in-out; -moz-animation-name: fade-scale-out-pic; -moz-animation-duration: 1s; -moz-animation-iteration-count: 1; -moz-animation-timing-function: ease-in-out; -moz-animation-fill-mode: both; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes fade-scale-out-pic { 0% { -webkit-transform: scale(1.1); transform: scale(1.1); opacity:0.1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity:0; } } @-moz-keyframes fade-scale-out-pic { 0% { -webkit-transform: scale(1.1); transform: scale(1.1); opacity:0.1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity:0; } } @keyframes fade-scale-out-pic { 0% { -webkit-transform: scale(1.1); transform: scale(1.1); opacity:0.1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity:0; } } .second-block .projects-block .pic-part ul li.active img{ opacity:1; -webkit-animation-name: fade-scale-in-pic; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease-in-out; -moz-animation-name: fade-scale-in-pic; -moz-animation-duration: 1s; -moz-animation-iteration-count: 1; -moz-animation-timing-function: ease-in-out; -moz-animation-fill-mode: both; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes fade-scale-in-pic { 0% { opacity:0; } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); opacity:0.5; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity:1; } } @-moz-keyframes fade-scale-in-pic { 0% { opacity:0; } 50% { -moz-transform: scale(1.1); transform: scale(1.1); opacity:0.5; } 100% { -moz-transform: scale(1); transform: scale(1); opacity:1; } } @keyframes fade-scale-in-pic { 0% { opacity:0; } 50% { transform: scale(1.1); opacity:0.5; } 100% { transform: scale(1); opacity:1; } } .second-block .projects-block .content-part{ width:50%; padding:60px 40px; height:393px; background:#dc0a0a; float:left; position:relative; } .second-block .projects-block .content-part:before{ content: ''; width: 0; height: 0; border-top: 393px solid transparent; border-bottom: 0px solid transparent; border-right: 73px solid #dc0a0a; position: absolute; left: -73px; top: 0px; } .second-block .projects-block .content-part ul{ margin:0px !important; display: block !important; list-style-type: disc !important; margin-before: 0px !important; margin-after: 0px !important; margin-start: 0px !important; margin-end: 0px !important; padding-start: 0px !important; -webkit-margin-before: 0px !important; -webkit-margin-after: 0px !important; -webkit-margin-start: 0px !important; -webkit-margin-end: 0px !important; -webkit-padding-start: 0px !important; -ms-margin-before: 0px !important; -ms-margin-after: 0px !important; -ms-margin-start: 0px !important; -ms-margin-end: 0px !important; -ms-padding-start: 0px !important; -moz-margin-before: 0px !important; -moz-margin-after: 0px !important; -moz-margin-start: 0px !important; -moz-margin-end: 0px !important; -moz-padding-start: 0px !important; -o-margin-before: 0px !important; -o-margin-after: 0px !important; -o-margin-start: 0px !important; -o-margin-end: 0px !important; -o-padding-start: 0px !important; } .second-block .projects-block .content-part ul li{ list-style:none; display:none; } .second-block .projects-block .content-part ul li.active{ display:block; } .second-block .projects-block .content-part ul li.active .project-name{ text-align:left; font-size: 26px; line-height: 28px; font-family: 'nexa_boldregular'; color: #ffffff; margin-bottom:15px; animation-name: slideLeftTitle; -webkit-animation-name: slideLeftTitle; -moz-animation-name: slideLeftTitle; animation-duration: 1s; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; } @keyframes slideLeftTitle { 0% { transform: translateX(10%); opacity:0.1; } 50%{ transform: translateX(-4%); } 65%{ transform: translateX(2%); } 80%{ transform: translateX(-2%); } 95%{ transform: translateX(1%); } 100% { transform: translateX(0%); opacity:1; } } @-webkit-keyframes slideLeftTitle { 0% { -webkit-transform: translateX(10%); } 50%{ -webkit-transform: translateX(-4%); } 65%{ -webkit-transform: translateX(2%); } 80%{ -webkit-transform: translateX(-2%); } 95%{ -webkit-transform: translateX(1%); } 100% { -webkit-transform: translateX(0%); } } @-moz-keyframes slideLeftTitle { 0% { -moz-transform: translateX(10%); } 50%{ -moz-transform: translateX(-4%); } 65%{ -moz-transform: translateX(2%); } 80%{ -moz-transform: translateX(-2%); } 95%{ -moz-transform: translateX(1%); } 100% { -moz-transform: translateX(0%); } } .second-block .projects-block .content-part ul li .project-des{ opacity:0; } .second-block .projects-block .content-part ul li.active .project-des{ font-size: 15px; line-height: 20px; color: #fc9696; text-align: left; font-family: 'open_sansregular'; padding-bottom: 20px; opacity:1; animation-name: fadeInDescription; -webkit-animation-name: fadeInDescription; -moz-animation-name: fadeInDescription; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -moz-animation-delay:.2s; -webkit-animation-delay:.2s; animation-delay:.2s; -moz-animation-fill-mode: both; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes fadeInDescription { 0% { opacity: 0.0; } 100% { opacity: 1; } } @-webkit-keyframes fadeInDescription { 0% { opacity: 0.0; } 100% { opacity: 1; } } @-moz-keyframes fadeInDescription { 0% { opacity: 0.0; } 100% { opacity: 1; } } .second-block .projects-block .content-part ul li.active .technologies{ padding-bottom:30px; } .second-block .projects-block .content-part ul li.active .technologies .item{ padding:0px 10px; float:left; } .second-block .projects-block .content-part ul li .technologies .item img{ opacity:0.0; } .second-block .projects-block .content-part ul li.active .technologies .item img{ opacity:0.34; } .second-block .projects-block .content-part ul li.active .technologies .item:nth-child(1) img{ animation-name: fadeInTechItem; -webkit-animation-name: fadeInTechItem; -moz-animation-name: fadeInTechItem; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -moz-animation-delay:.2s; -webkit-animation-delay:.2s; animation-delay:.2s; -moz-animation-fill-mode: both; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .second-block .projects-block .content-part ul li.active .technologies .item:nth-child(2) img{ animation-name: fadeInTechItem; -webkit-animation-name: fadeInTechItem; -moz-animation-name: fadeInTechItem; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -moz-animation-delay:.4s; -webkit-animation-delay:.4s; animation-delay:.4s; -moz-animation-fill-mode: both; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .second-block .projects-block .content-part ul li.active .technologies .item:nth-child(3) img{ animation-name: fadeInTechItem; -webkit-animation-name: fadeInTechItem; -moz-animation-name: fadeInTechItem; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -moz-animation-delay:.6s; -webkit-animation-delay:.6s; animation-delay:.6s; -moz-animation-fill-mode: both; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .second-block .projects-block .content-part ul li.active .technologies .item:nth-child(4) img{ animation-name: fadeInTechItem; -webkit-animation-name: fadeInTechItem; -moz-animation-name: fadeInTechItem; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -moz-animation-delay:.8s; -webkit-animation-delay:.8s; animation-delay:.8s; -moz-animation-fill-mode: both; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes fadeInTechItem { 0% { transform: scale(0); opacity: 0.0; } 60% { transform: scale(1.1); opacity: 1; } 80% { transform: scale(0.9); } 100% { transform: scale(1); opacity:0.34; } } @-webkit-keyframes fadeInTechItem { 0% { -webkit-transform: scale(0); opacity: 0.0; } 60% { -webkit-transform: scale(1.1); opacity: 1; } 80% { -webkit-transform: scale(0.9); } 100% { -webkit-transform: scale(1); opacity:0.34; } } .second-block .projects-block .content-part ul li.active .view { float: left; text-decoration: none; color: #ffffff; font-family: 'open_sansregular'; font-weight:bold; font-size: 13px; letter-spacing: 6px; padding: 14px 45px; border: 1px solid #ffffff; text-transform: uppercase; animation-name: slideLeftView; -webkit-animation-name: slideLeftView; -moz-animation-name: slideLeftView; animation-duration: .5s; -webkit-animation-duration: .5s; -moz-animation-duration: .5s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -moz-animation-delay:1.2s; -webkit-animation-delay:1.2s; animation-delay:1.2s; -moz-animation-fill-mode: both; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes slideLeftView { 0% { transform: translateX(20%); opacity:0; } 100% { transform: translateX(0%); opacity:1; } } @-webkit-keyframes slideLeftView { 0% { -webkit-transform: translateX(20%); opacity:0; } 100% { -webkit-transform: translateX(0%); opacity:1; } } @-moz-keyframes slideLeftView { 0% { -moz-transform: translateX(20%); opacity:0; } 100% { -moz-transform: translateX(0%); opacity:1; } } .second-block .projects-block a.control_prev_proj, .second-block .projects-block a.control_next_proj { text-align:center; position: absolute; bottom:35px; border:3px solid #ffffff; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index: 11000; display: block; padding: 10px; width: 50px; height: 50px; color: #fff; text-decoration: none; cursor: pointer; opacity: 0.5; -moz-transition: all .5s all linear; -webkit-transition: all .5s all linear; transition: all .5s all linear; } .second-block .projects-block a.control_prev_proj:hover, .second-block .projects-block a.control_next_proj:hover { opacity: 1; } .second-block .projects-block a.control_prev_proj { right:90px; } .second-block .projects-block a.control_prev_proj:hover img{ -webkit-animation-name: hvr-icon-wobble-horizontal; animation-name: hvr-icon-wobble-horizontal; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .second-block .projects-block a.control_next_proj { right:30px; } .second-block .projects-block a.control_next_proj:hover img{ -webkit-animation-name: hvr-icon-wobble-horizontal; animation-name: hvr-icon-wobble-horizontal; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .third-block{ background:#ffffff; padding:0 3em 3em; } .third-block h2{ text-align: center; font-size: 23px; line-height: 29px; font-family: 'nexa_boldregular'; margin: 0px; color: #000000; position: relative; /*margin-bottom: 30px;*/ margin-top: 58px; text-transform: uppercase; letter-spacing: 4px; } .third-block h2 span{ color:#dc0a0a; } .third-block h2:after{ content:""; display:block; position:absolute; width:60px; height:3px; background:#ff1414; transform:translateX(-50%); left:50%; margin-top:10px; } .third-block .phase{ } .col-8{ width: 12.5%; float:left; padding-left:15px; padding-right:15px; } .third-block .phase{ margin-top:70px; } .third-block .phase a{ text-decoration:none !important; outline:none !important; display:block; } .third-block .phase a .icon{ text-align:center; } .third-block .phase a .icon svg{ width:60px; height:60px; fill:#AFB4BC; transition:all .3s; } .third-block .phase a:hover .icon svg{ fill:#ff1414; } /* smoke-up */ @-webkit-keyframes smoke-up { 50% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } 100% { -webkit-transform: translateY(-4px); transform: translateY(-4px); } } @keyframes smoke-up { 50% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } 100% { -webkit-transform: translateY(-4px); transform: translateY(-4px); } } .third-block .phase a .icon svg .smoke-1{ } .third-block .phase a:hover .icon svg .smoke-1{ -webkit-animation-name: smoke-up; animation-name: smoke-up; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-delay: 0; animation-delay: 0; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; } .third-block .phase a:hover .icon svg .smoke-2{ -webkit-animation-name: smoke-up; animation-name: smoke-up; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; } .third-block .phase a:hover .icon svg .smoke-3{ -webkit-animation-name: smoke-up; animation-name: smoke-up; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; } .third-block .phase a .icon svg .cup{ -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; transition-duration: 0.8s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transform-origin:center; transform-origin:center; } .third-block .phase a:hover .icon svg .cup{ -webkit-transform:rotateY(-180deg) translateX(6px); -moz-transform:rotateY(-180deg) translateX(6px); transform:rotateY(-180deg) translateX(6px); } /* scale */ @-webkit-keyframes ScaleIn{ 0% { opacity: 0; transform:scale(1); } 20% { opacity: 0; transform:scale(.5); } 80% { opacity: 1; transform:scale(1.2); } 100% { opacity: 1; transform:scale(1); } } @keyframes ScaleIn{ 0% { opacity: 0; transform:scale(1); } 20% { opacity: 0; transform:scale(.5); } 80% { opacity: 1; transform:scale(1.1); } 100% { opacity: 1; transform:scale(1); } } .third-block .phase a .icon svg .table{ -webkit-transform-origin:center; transform-origin:center; } .third-block .phase a:hover .icon svg .table{ -webkit-animation-name: ScaleIn; animation-name: ScaleIn; -webkit-animation-duration:.6s; animation-duration: .6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0; /* Chrome, Safari, Opera */ animation-delay: 0; } /* fadeIn-right */ @-webkit-keyframes fadeIn-right { from { opacity: 0; transform: translateX(-7px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeIn-right{ from { opacity: 0; transform: translateX(-7px); } to { opacity: 1; transform: translateX(0); } } .third-block .phase a .icon svg .person-left{ -webkit-transform-origin:center; transform-origin:center; } .third-block .phase a:hover .icon svg .person-left{ -webkit-animation-name: fadeIn-right; animation-name: fadeIn-right; -webkit-animation-duration:.6s; animation-duration: .6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: .3s; /* Chrome, Safari, Opera */ animation-delay: .3s; } /* fadeIn-left */ @-webkit-keyframes fadeIn-left { from { opacity: 0; transform: translateX(7px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeIn-left{ from { opacity: 0; transform: translateX(7px); } to { opacity: 1; transform: translateX(0); } } .third-block .phase a .icon svg .person-right{ -webkit-transform-origin:center; transform-origin:center; } .third-block .phase a:hover .icon svg .person-right{ -webkit-animation-name: fadeIn-left; animation-name: fadeIn-left; -webkit-animation-duration:.6s; animation-duration: .6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: .5s; /* Chrome, Safari, Opera */ animation-delay: .5s; } /* FlipIn-x */ @-webkit-keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .third-block .phase a .icon svg .chart-board{ -webkit-transform-origin:center; transform-origin:center; } .third-block .phase a:hover .icon svg .chart-board{ -webkit-animation-name: flipInX; animation-name: flipInX; -webkit-animation-duration:1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: .6s; /* Chrome, Safari, Opera */ animation-delay: .6s; } .third-block .phase a .icon svg .pad{ -webkit-transform-origin:center; transform-origin:center; } .third-block .phase a:hover .icon svg .pad{ -webkit-animation-name: fadeIn-right; animation-name: fadeIn-right; -webkit-animation-duration:.6s; animation-duration: .6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0; /* Chrome, Safari, Opera */ animation-delay: 0; } .third-block .phase a .icon svg .pencil{ -webkit-transform-origin:center; transform-origin:center; } .third-block .phase a:hover .icon svg .pencil{ -webkit-animation-name: fadeIn-left; animation-name: fadeIn-left; -webkit-animation-duration:.6s; animation-duration: .6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: .3s; /* Chrome, Safari, Opera */ animation-delay: .3s; } /* rotation */ @-webkit-keyframes rotating { from { -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotating { from { -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } .third-block .phase a .icon svg .setting-big{ -webkit-transform-origin:center; transform-origin:center; } .third-block .phase a:hover .icon svg .setting-big{ -webkit-animation: rotating 3s linear infinite; -moz-animation: rotating 3s linear infinite; -ms-animation: rotating 3s linear infinite; -o-animation: rotating 3s linear infinite; animation: rotating 3s linear infinite; } .third-block .phase a .icon svg .setting-small{ -webkit-transform-origin:center; transform-origin:center; } .third-block .phase a:hover .icon svg .setting-small{ -webkit-animation: rotating 6s linear infinite; -moz-animation: rotating 6s linear infinite; -ms-animation: rotating 6s linear infinite; -o-animation: rotating 6s linear infinite; animation: rotating 6s linear infinite; } /* fadeIn-up */ @-webkit-keyframes fadeIn-up { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn-up{ from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } } .third-block .phase a .icon svg .computer-big{ -webkit-transform-origin:center; transform-origin:center; } .third-block .phase a:hover .icon svg .computer-big{ -webkit-animation-name: fadeIn-up; animation-name: fadeIn-up; -webkit-animation-duration:.8s; animation-duration: .8s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0; /* Chrome, Safari, Opera */ animation-delay: 0; } /* fadeIn-bottom */ @-webkit-keyframes fadeIn-bottom { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn-bottom{ from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: translateY(0); } } .third-block .phase a .icon svg .computer-small{ -webkit-transform-origin:center; transform-origin:center; } .third-block .phase a:hover .icon svg .computer-small{ -webkit-animation-name: fadeIn-bottom; animation-name: fadeIn-bottom; -webkit-animation-duration:.8s; animation-duration: .8s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay:.3s; /* Chrome, Safari, Opera */ animation-delay: .3s; } .third-block .phase a .icon svg .thunder{ -webkit-transform-origin:center; transform-origin:center; } .third-block .phase a:hover .icon svg .thunder{ -webkit-animation-name: ScaleIn; animation-name: ScaleIn; -webkit-animation-duration:.6s; animation-duration: .6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay:.4s; /* Chrome, Safari, Opera */ animation-delay: .4s; } .third-block .phase a .icon svg .table-delivery{ -webkit-transform-origin:center; transform-origin:center; } .third-block .phase a:hover .icon svg .table-delivery{ -webkit-animation-name: ScaleIn; animation-name: ScaleIn; -webkit-animation-duration:.6s; animation-duration: .6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay:0; /* Chrome, Safari, Opera */ animation-delay: 0; } .third-block .phase a .icon svg .customer{ -webkit-transform-origin:center; transform-origin:center; } .third-block .phase a:hover .icon svg .customer{ -webkit-animation-name: fadeIn-left; animation-name: fadeIn-left; -webkit-animation-duration:.6s; animation-duration: .6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay:.3s; /* Chrome, Safari, Opera */ animation-delay: .3s; } .third-block .phase a .icon svg .delivery-boy{ -webkit-transform-origin:center; transform-origin:center; } .third-block .phase a:hover .icon svg .delivery-boy{ -webkit-animation-name: fadeIn-right; animation-name: fadeIn-right; -webkit-animation-duration:.6s; animation-duration: .6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay:.5s; /* Chrome, Safari, Opera */ animation-delay: .5s; } .third-block .phase a .icon svg .product-stack-1{ -webkit-transform-origin:center; transform-origin:center; } .third-block .phase a:hover .icon svg .product-stack-1{ -webkit-animation-name: ScaleIn; animation-name: ScaleIn; -webkit-animation-duration:.6s; animation-duration: .6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay:.6s; /* Chrome, Safari, Opera */ animation-delay: .6s; } .third-block .phase a .icon svg .product-stack-2{ -webkit-transform-origin:center; transform-origin:center; } .third-block .phase a:hover .icon svg .product-stack-2{ -webkit-animation-name: ScaleIn; animation-name: ScaleIn; -webkit-animation-duration:.6s; animation-duration: .6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay:.7s; /* Chrome, Safari, Opera */ animation-delay: .7s; } .third-block .phase a .icon svg .base-line{ -webkit-transform-origin:center; transform-origin:center; } .third-block .phase a:hover .icon svg .base-line{ -webkit-animation-name: fadeIn-right; animation-name: fadeIn-right; -webkit-animation-duration:.6s; animation-duration: .6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay:0; /* Chrome, Safari, Opera */ animation-delay:0; } .third-block .phase a .icon svg .graph-bar-1{ -webkit-transform-origin:center; transform-origin:center; } .third-block .phase a:hover .icon svg .graph-bar-1{ -webkit-animation-name: ScaleIn; animation-name: ScaleIn; -webkit-animation-duration:.6s; animation-duration: .6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay:.3s; /* Chrome, Safari, Opera */ animation-delay:.3s; } .third-block .phase a .icon svg .graph-bar-2{ -webkit-transform-origin:center; transform-origin:center; } .third-block .phase a:hover .icon svg .graph-bar-2{ -webkit-animation-name: ScaleIn; animation-name: ScaleIn; -webkit-animation-duration:.6s; animation-duration: .6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay:.4s; /* Chrome, Safari, Opera */ animation-delay:.4s; } .third-block .phase a .icon svg .graph-bar-3{ -webkit-transform-origin:center; transform-origin:center; } .third-block .phase a:hover .icon svg .graph-bar-3{ -webkit-animation-name: ScaleIn; animation-name: ScaleIn; -webkit-animation-duration:.6s; animation-duration: .6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay:.5s; /* Chrome, Safari, Opera */ animation-delay:.5s; } .third-block .phase a .icon svg .graph-arrow{ -webkit-transform-origin:center; transform-origin:center; } .third-block .phase a:hover .icon svg .graph-arrow{ -webkit-animation-name: svg_arrow; animation-name: svg_arrow; -webkit-animation-duration:.6s; animation-duration: .6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay:.7s; /* Chrome, Safari, Opera */ animation-delay:.7s; } /* rotation-spanner */ @-webkit-keyframes rotate-spanner { from { -ms-transform: rotate(0deg) translateY(0); -moz-transform: rotate(0deg) translateY(0); -webkit-transform: rotate(0deg translateY(0)); -o-transform: rotate(0deg) translateY(0); transform: rotate(0deg) translateY(0); } 50% { -ms-transform: rotate(20deg) translateY(-7px); -moz-transform: rotate(20deg) translateY(-7px); -webkit-transform: rotate(20deg) translateY(-7px); -o-transform: rotate(20deg) translateY(-7px); transform: rotate(20deg) translateY(-7px); } to { -ms-transform: rotate(0deg) translateY(0); -moz-transform: rotate(0deg) translateY(0); -webkit-transform: rotate(0deg) translateY(0); -o-transform: rotate(0deg) translateY(0); transform: rotate(0deg) translateY(0); } } @keyframes rotate-spanner { from { -ms-transform: rotate(0deg) translateY(0); -moz-transform: rotate(0deg) translateY(0); -webkit-transform: rotate(0deg translateY(0)); -o-transform: rotate(0deg) translateY(0); transform: rotate(0deg) translateY(0); } 50% { -ms-transform: rotate(20deg) translateY(-7px); -moz-transform: rotate(20deg) translateY(-7px); -webkit-transform: rotate(20deg) translateY(-7px); -o-transform: rotate(20deg) translateY(-7px); transform: rotate(20deg) translateY(-7px); } to { -ms-transform: rotate(0deg) translateY(0); -moz-transform: rotate(0deg) translateY(0); -webkit-transform: rotate(0deg) translateY(0); -o-transform: rotate(0deg) translateY(0); transform: rotate(0deg) translateY(0); } } .third-block .phase a .icon svg .spanner{ -webkit-transform-origin: left; transform-origin:left; } .third-block .phase a:hover .icon svg .spanner{ -webkit-animation: rotate-spanner 1s linear infinite; -moz-animation: rotate-spanner 1s linear infinite; -ms-animation: rotate-spanner 1s linear infinite; -o-animation: rotate-spanner 1s linear infinite; animation: rotate-spanner 1s linear infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .third-block .phase a .text{ text-align:center; font-size:14px; line-height:18px; color:#494444; padding:10px 15px 20px; } .third-block .testimonials{ border-top:1px solid #afb4bc; position:relative; } .third-block .testimonials:before{ content:""; width:8px; height:8px; border-radius:50%; webkit-border-radius:50%; -moz-border-radius:50%; background:#afb4bc; display:block; position:absolute; top:-4px; left:0px; } .third-block .testimonials:after{ content:""; width:8px; height:8px; border-radius:50%; webkit-border-radius:50%; -moz-border-radius:50%; background:#afb4bc; display:block; position:absolute; top:-4px; right:0px; } .owl-wrapper-outer{ } .owl-wrapper-outer{ } .testimonials .item{ padding:50px 20px; min-height:240px; } .testimonials .owl-wrapper .owl-item:nth-last-child(1) .item:after{ background: transparent; } .testimonials .owl-wrapper .owl-item:nth-last-child(1) .item{ border:none; } .testimonials .owl-carousel .owl-item{ margin-left: -5px; } .testimonials .item:nth-child(odd){ border-right:1px solid #afb4bc; } .testimonials .item:nth-child(odd):after{ content:""; width:8px; height:8px; border-radius:50%; webkit-border-radius:50%; -moz-border-radius:50%; background:#dc0a0a; display:block; position:absolute; bottom:0px; right:-4px; } .testimonials .item .pic{ text-align:center; overflow:hidden; } .testimonials .item .pic img{ max-width:100%; height:auto; border-radius:50%; webkit-border-radius:50%; -moz-border-radius:50%; border:1px solid #a39797; } .testimonials .item .content{ } .testimonials .item .content h5{ font-family: 'robotoblack'; color:#000000; font-size:14px; margin:0px; padding-bottom:12px; text-transform:uppercase; letter-spacing:3px; } .testimonials .item .content h5 .date{ color:#e30202; } .testimonials .item .content p{ font-size: 14px; line-height: 20px; color:#797575; text-align:left; font-family: 'robotoregular'; margin:0px; padding-bottom:10px; } .testimonials .item .content a{ text-transform:uppercase; font-size: 12px; color:#000000; font-family: 'robotoblack'; margin:0px; text-decoration:none; letter-spacing:3px; } .third-block .discuss{ text-align:center; margin-bottom:25px; margin-top:30px; } .third-block .discuss a{ display:inline-block; text-decoration:none; color:#000000; font-family: 'robotolight'; font-size:45px; -moz-transition:all .3s linear; -webkit-transition:all .3s linear; transition:all .3s linear; } .third-block .discuss a span{ font-family: 'robotoblack'; } .third-block .discuss a:after{ content:""; display:block; position:absolute; -moz-transform:translateX(-50px); -webkit-transform:translateX(-50px); transform:translateX(-50px); left:50%; width:150px; height:5px; background:#dc0a0a; } .third-block .discuss a:hover{ color:#dc0a0a; } .fourth-block{ background:#eaeaea; padding:4.7em 3em 3em; } .fourth-block .first-row{ margin-bottom:40px; } .fourth-block .quick-enq{ } .fourth-block .quick-enq .form-styler{ background:#ffffff !important; height:48px; color:#464645; border:none !important; padding:8px 15px !important; border-radius:0px !important; box-shadow: none !important; -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; font-family: 'robotolight'; font-size:15px; } .fourth-block .quick-enq .form-styler::-moz-placeholder{color:#464645 !important;opacity:1}.fourth-block .quick-enq .form-styler:-ms-input-placeholder{color:#464645 !important}.fourth-block .quick-enq .form-styler::-webkit-input-placeholder{color:#464645 !important} .fourth-block .quick-enq .form-styler:focus{ border-bottom:1px solid #e5c909; } .msg{ height:100px !important; } .send-btn-holder{ padding-top:20px; } .fourth-block .quick-enq .send-button{ line-height: .0em; float: left; font-size: 3em; color: #e30202; text-decoration: none; background: transparent; border: none !important; outline: none !important; } .fourth-block .quick-enq .send-button .fa{ -moz-transform: rotate3d(0, 0, 1, 25deg); -webkit-transform: rotate3d(0, 0, 1, 25deg); transform: rotate3d(0, 0, 1, 25deg); transform-origin: top right; -moz-transition:all .3s ; -webkit-transition:all .3s ; transition:all .3s ; } .fourth-block .quick-enq .send-button:hover .fa { -moz-transform: rotate3d(0, 0, 1, 25deg) scale(.8) translateY(-10px); -webkit-transform: rotate3d(0, 0, 1, 25deg) scale(.8) translateY(-10px); transform: rotate3d(0, 0, 1, 25deg) scale(.8) translateY(-10px); } .fourth-block .quick-enq .send-button:hover{ outline:none !important; } .fourth-block .quick-enq .send-button:focus{ outline:none !important; } .fourth-block .map-holder{ } .fourth-block .map-holder #map { width:100%; height:360px; } .fourth-block .second-row{ display:inline-flex; width:100%; } .fourth-block .second-row > div{ padding:33px 15px; } .fourth-block .second-row > div:nth-child(odd){ background:#e30202; } .fourth-block .second-row > div:nth-child(even){ background:#f83333; } .fourth-block .second-row .icon-holder{ text-align:center; } .fourth-block .second-row .icon-holder .icon{ padding:16px 3px; width:66px; height:66px; border:2px solid #ffffff; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; display:inline-block; text-align:center; position:relative; } .fourth-block .second-row > div .icon-holder .icon:before{ content:""; display:block; position:absolute; width:100%; height:100%; top:0px; left:0px; z-index:99; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; border:1px solid #ffffff; opacity:0; } .fourth-block .second-row > div:hover .icon-holder .icon:before{ -webkit-animation-name: IconRoundOne; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease-in-out; -moz-animation-name: IconRoundOne; -moz-animation-duration: 1s; -moz-animation-iteration-count: 1; -moz-animation-timing-function: ease-in-out; -moz-animation-fill-mode: both; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes IconRoundOne { 0% { -webkit-transform: scale(1); transform: scale(1); opacity:0; } 50% { -webkit-transform: scale(1.3); transform: scale(1.3); opacity:1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity:0; } } @-moz-keyframes IconRoundOne { 0% { -moz--transform: scale(1); transform: scale(1); opacity:0; } 50% { -moz--transform: scale(1.3); transform: scale(1.3); opacity:1; } 100% { -moz--transform: scale(1); transform: scale(1); opacity:0; } } .fourth-block .second-row > div .icon-holder .icon:after{ content:""; display:block; position:absolute; width:100%; height:100%; top:0px; left:0px; z-index:99; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; border:1px solid #ffffff; opacity:0; } .fourth-block .second-row > div:hover .icon-holder .icon:after{ -webkit-animation-name: IconRoundTwo; -webkit-animation-duration: 0.8s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease-in-out; -moz-animation-name: IconRoundTwo; -moz-animation-duration: 0.8s; -moz-animation-iteration-count: 1; -moz-animation-timing-function: ease-in-out; -moz-animation-fill-mode: both; -webkit-animation-fill-mode: both; animation-fill-mode: both; -moz-animation-delay:.15s; -webkit-animation-delay:.15s; animation-delay:.15s; } @-webkit-keyframes IconRoundTwo { 0% { -webkit-transform: scale(1); transform: scale(1); opacity:0; } 50% { -webkit-transform: scale(1.5); transform: scale(1.5); opacity:0.4; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity:0; } } @-moz-keyframes IconRoundTwo { 0% { -moz--transform: scale(1); transform: scale(1); opacity:0; } 50% { -moz--transform: scale(1.5); transform: scale(1.5); opacity:0.4; } 100% { -moz--transform: scale(1); transform: scale(1); opacity:0; } } .fourth-block .second-row > div .icon-holder .icon img{ -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; transition-duration: 0.8s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; } .fourth-block .second-row > div:hover .icon-holder .icon img{ -webkit-transform:rotateY(-180deg); -moz-transform:rotateY(-180deg); transform:rotateY(-180deg); } .fourth-block .second-row .content-holder{ padding-left:0px; cursor:default !important; } .fourth-block .second-row .content-holder h4{ font-family: 'robotolight'; color: #ffffff; font-size: 26px; font-size: 28px; margin: 0px; padding-bottom: 12px; } .fourth-block .second-row .content-holder p{ font-size: 16px; line-height: 24px; color: #fbebeb; text-align: left; font-family: 'robotolight'; padding-bottom: 12px; margin: 0px; } .footer-block{ background:#ffffff; padding: 4.3em 3em; } .footer-block .copyright{ } .footer-block .copyright .logo{ text-align:left; padding-bottom:20px; } .footer-block .copyright .text{ text-align:left; font-family: 'robotolight'; color:#272626; line-height:18px; font-size:15px; } .footer-block h4{ text-align: left; font-size: 14px; font-family: 'nexa_boldregular'; color: #ff1414; margin: 0px; padding-bottom: 13px; text-transform: uppercase; } .footer-block ul{ margin:0px !important; display: block !important; list-style-type: disc !important; margin-before: 0px !important; margin-after: 0px !important; margin-start: 0px !important; margin-end: 0px !important; padding-start: 0px !important; -webkit-margin-before: 0px !important; -webkit-margin-after: 0px !important; -webkit-margin-start: 0px !important; -webkit-margin-end: 0px !important; -webkit-padding-start: 0px !important; -ms-margin-before: 0px !important; -ms-margin-after: 0px !important; -ms-margin-start: 0px !important; -ms-margin-end: 0px !important; -ms-padding-start: 0px !important; -moz-margin-before: 0px !important; -moz-margin-after: 0px !important; -moz-margin-start: 0px !important; -moz-margin-end: 0px !important; -moz-padding-start: 0px !important; -o-margin-before: 0px !important; -o-margin-after: 0px !important; -o-margin-start: 0px !important; -o-margin-end: 0px !important; -o-padding-start: 0px !important; } .footer-block ul li{ list-style:none; line-height:30px; font-size:15px; font-family: 'robotoregular'; } .footer-block ul li a{ text-decoration:none; color:#575555; -webkit-transition:all .3s; transition:all .3s; } .footer-block ul li a:hover{ text-decoration:none; color:#000000; } .footer-block .phone{ color:#e2b208; font-size:28px; font-family: 'robotoregular'; text-align:left; } .footer-block .phone b{ color:#000000; font-family: 'robotoblack'; } .social li{ list-style:none; padding:0px 15px; float:left; } .social li:first-child{ padding-left:0px; } .social li:last-child{ padding-right:0px; } .social li a{ text-decoration:none; float:left; padding-top:0px; } .social li a img{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); /*filter: url(grayscale.svg); Firefox 4+ */ /*filter: gray; /* IE 6-9 */ webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -ms-transition-duration: 0.3s; transition-duration: 0.3s; opacity:0.45; } .social li a img:hover{ -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -ms-filter: grayscale(0); -o-filter: grayscale(0); filter: grayscale(0); opacity:1; } .inner-head-block{ background:#091319; height:30vw; position:relative; } .inner-head-block:after{ background:rgba(7, 37, 56, 0.9); content:""; position:absolute; width:100%; height:100%; z-index:99; } .about-head{ background:url(../img/bg-about.jpg); background-size:cover; } .page-title{ color:#ffffff; text-align:center; font-size:4.5em; line-height:1em; transform:translateX(-50%); -webkit-transform:translateX(-50%); left:50%; bottom:0; position:absolute; z-index:999; font-family: 'nexa_boldregular'; border-bottom:5px solid #ff1414; padding:.3em .5em; } .page-title span{ color:#ff1414; } .inner-content-block{ background:#e8e8e8; padding:3em; } .inner-content-block .top-section-special{ padding:1.8em 0; background:#ff1414; -webkit-box-shadow: 0px 0px 46px -3px rgba(77,76,77,0.20); -moz-box-shadow: 0px 0px 46px -3px rgba(77,76,77,0.20); box-shadow: 0px 0px 46px -3px rgba(77,76,77,0.20); } .inner-content-block .top-section-special:before{ width:100%; height:100%; content:""; top:0; left:0; opacity:0.3; position:absolute; background:url(../img/bg-overlay.png) no-repeat; background-size:cover; } .inner-content-block .top-section-special .service-vector-holder{ text-align:center; padding-left:0; padding-right:0; padding-bottom:1em; } .inner-content-block .top-section-special .service-vector-holder img{ max-width:100%; } .inner-content-block .top-section-special h1{ font-family: 'nexa_boldregular'; text-align: center; font-size:2em; line-height:1em; margin:0px; color:#ffffff; margin-bottom:.5em; text-transform:uppercase; letter-spacing:.2em; } .inner-content-block .top-section-special h2{ font-family: 'open_sanslight'; text-align: center; font-size:1.2em; line-height:1em; margin:0px; color:#ffffff; margin-bottom:.5em; padding-left:3em; padding-right:3em; } .inner-content-block .content-box{ padding:2em; background:#ffffff; margin-left:0; margin-right:0; -webkit-box-shadow: 0px 0px 46px -3px rgba(77,76,77,0.20); -moz-box-shadow: 0px 0px 46px -3px rgba(77,76,77,0.20); box-shadow: 0px 0px 46px -3px rgba(77,76,77,0.20); } .inner-content-block .content-box h1{ text-align:left; font-size:1.3em; line-height:1em; font-family: 'nexa_boldregular'; margin:0px; color:#000000; position:relative; margin-bottom:.5em; text-transform:uppercase; letter-spacing:.2em; } .inner-content-block .content-box h1 span{ color:#ff1414; } .inner-content-block .content-box h1:after { margin-top:10px; background: #ff1414; content: ""; display: block; height: 3px; width:65px; } .inner-content-block .content-box h2{ text-align:left; font-size:1.2em; line-height:1em; font-family: 'nexa_boldregular'; margin:0px; color:#000000; margin-bottom:.5em; } .inner-content-block .content-box .specific h3{ font-family: 'open_sanslight'; text-align: center; font-size:1.7em; line-height:1.3em; margin:0px; color:#000000; margin-bottom:3.5em; padding-top:1.5em; padding-left:3em; padding-right:3em; } .inner-content-block .content-box .specific h3 span{ font-family: 'open_sansregular'; font-weight:bold; color:#ff1414; } .inner-content-block .content-box .sub-services{ border-bottom:1px solid #e0dfdf; margin-left:0; margin-right:0; margin-bottom:3.5em; } .inner-content-block .content-box .sub-services .total{ } .inner-content-block .content-box .sub-services .total .icon{ text-align: center; padding-bottom:1em; } .inner-content-block .content-box .sub-services .total h4{ font-family: 'open_sansregular'; text-align: center; font-size:1.2em; line-height:1em; color:#000000; margin:0; margin-bottom:.8em; } .inner-content-block .content-box .sub-services .total p{ text-align:center; font-size: .85em; color:#9a9a9a; padding-bottom:2.5em; } .inner-content-block .content-box .service-2-column p{ font-size:1.2em; color:#656567; padding-bottom:2.5em; } .inner-content-block .content-box .tell-btn-holder{ text-align:center; padding-bottom:4em; } .inner-content-block .content-box .tell-btn-holder .tell-btn{ display:inline-block; float:none; } .inner-content-block .content-box .bottom-section{ text-align:center; } .inner-content-block .content-box p{ font-size: .9em; line-height: 1.3em; color:#949494; text-align:left; text-align:justify; font-family: 'open_sansregular'; } .inner-content-block .content-box.careers ul{ margin:0px !important; display: block !important; list-style-type: disc !important; margin-before: 0px !important; margin-after: 20px !important; margin-start: 20px !important; margin-end: 0px !important; padding-start: 20px !important; -webkit-margin-before: 0px !important; -webkit-margin-after: 20px !important; -webkit-margin-start: 0px !important; -webkit-margin-end: 0px !important; -webkit-padding-start: 20px !important; -ms-margin-before: 0px !important; -ms-margin-after: 20px !important; -ms-margin-start: 0px !important; -ms-margin-end: 0px !important; -ms-padding-start: 20px !important; -moz-margin-before: 0px !important; -moz-margin-after: 20px !important; -moz-margin-start: 0px !important; -moz-margin-end: 0px !important; -moz-padding-start: 20px !important; -o-margin-before: 0px !important; -o-margin-after: 20px !important; -o-margin-start: 0px !important; -o-margin-end: 0px !important; -o-padding-start: 20px !important; } .inner-content-block .content-box.careers ul li{ list-style:none; list-style-image: url(../img/direction-list-red.png); color:#7e7b7b; font-family: 'open_sansregular'; font-size: .9em; line-height: 2.3em; } .inner-content-block ol{ } .inner-content-block ol li{ color:#7e7b7b; font-family: 'open_sansregular'; font-size: .9em; line-height: 2em; text-align:justify; } .inner-content-block ol li span{ color:#ff1414; font-weight:bold; } .default-button{ float:left; text-decoration:none; color:#ffffff; font-family: 'robotoblack'; font-size:13px; letter-spacing:6px; padding:18px 30px; border: none; background:#f40c0c; text-transform:uppercase; position:relative; z-index:1; width:auto; } .default-button:before{ position:absolute; left:0px; top:0px; height:100%; content:""; width:0px; background:#112843; z-index:-1; -moz-transition: all .7s; -o-transition: all .7s; -ms-transition: all .7s; -webkit-transition: all .7s; transition: all .7s; } .default-button:after{ font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; position: relative; -webkit-font-smoothing: antialiased; content: "\e00d"; } .default-button:hover{ text-decoration:none; color:#ffffff; } .default-button:focus{ text-decoration:none; color:#ffffff; } .default-button:hover:before{ width:100%; } .pic-about{ } .pic-about img{ width:100%; height:auto; } .mapples{ color:#1d1d1d !important; font-family: 'robotoblack' !important; letter-spacing:2px; } .service-title-section{ background:#069; } .service-title-section .red-part{ height:33vw; background:#9a1618 url(../img/red-bg-service.jpg) no-repeat; background-size:cover; position:relative; } .service-title-section .red-part .circle-holder{ position:absolute; width:36.5vw; bottom:-12vw; left:5vw; z-index:99; -webkit-border-radius:50%; border-radius:50%; border:1px solid #ffffff; } .service-title-section .red-part .circle-holder:after{ width:0.8vw; height:0.8vw; background:#ffffff; left:7%; top:16%; content:""; z-index:99; position:absolute; border-radius:50%; -webkit-border-radius:50%; border:.9vw solid #9a1618; box-sizing: content-box; } .service-title-section .red-part .circle-holder:before{ width:0.8vw; height:0.8vw; background:#ffffff; right:7%; top:16%; content:""; z-index:99; position:absolute; border-radius:50%; -webkit-border-radius:50%; border:.9vw solid #ab1618; box-sizing: content-box; } .service-title-section .red-part .circle-holder .pic{ width:100%; height:100%; padding:1.1em; -webkit-border-radius:50%; border-radius:50%; } .service-title-section .red-part .circle-holder .pic img{ width:100%; height:auto; border:1.2em solid #e41f22; -webkit-border-radius:50%; border-radius:50%; position:relative; z-index:9999; } .service-title-section .red-part .title-holder{ position:absolute; right:7vw; bottom:4.5vw; z-index:111; } .service-title-section .red-part .title-holder .web{ color:#ffffff; font-size:12vw; font-family: 'gotham_boldregular'; line-height:.75em; float:left; text-transform:uppercase; letter-spacing:-.1em; padding-right:.2em; } .service-title-section .red-part .title-holder .web-sub{ color:#ffffff; text-align:left; font-size:3.9vw; font-family: 'nexa_lightregular'; line-height:1em; float:left; text-transform:uppercase; padding-top:.3em; } .service-title-section .short-description{ background:#ffffff; padding:3em 2em; } .service-title-section .short-description p{ width:55%; float:right; text-align:left; color:#504f4f; font-family: 'open_sanslight'; font-size: 1.3em; line-height: 1.3em; margin: 0px; } .service-title-section .short-description p span{ color:#000000; font-family: 'robotoblack'; } .service-content-section{ background:#ffffff; padding:3em; overflow:hidden; } .service-content-section .pic-box{ height:20vw; position:relative; } .service-content-section .pic-box.one{ background: url(../img/servicepic-web-sub-1.jpg) no-repeat; background-size:cover; } .service-content-section .pic-box.two{ background: url(../img/servicepic-web-sub-2.jpg) no-repeat; background-size:cover; } .service-content-section .pic-box.three{ background: url(../img/servicepic-web-sub-3.jpg) no-repeat; background-size:cover; } .digi-marketing .service-content-section .pic-box.one{ background: url(../img/servicepic-dm-sub-1.jpg) no-repeat; background-size:cover; } .digi-marketing .service-content-section .pic-box.two{ background: url(../img/servicepic-dm-sub-2.jpg) no-repeat; background-size:cover; } .digi-marketing .service-content-section .pic-box.three{ background: url(../img/servicepic-dm-sub-3.jpg) no-repeat; background-size:cover; } .digi-marketing .service-content-section .pic-box.four{ background: url(../img/servicepic-dm-sub-4.jpg) no-repeat; background-size:cover; } .service-content-section .pic-box:after{ content:""; display:block; position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.15); } .service-content-section .pic-box .triangle-numbr { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; } .service-content-section .pic-box .triangle-numbr svg { width: 100%; height: inherit; } .service-content-section .pic-box .triangle-numbr:after{ width:75px; height:75px; background:#e11316; font-family: 'gotham_boldregular'; font-size:1.8em; line-height:.5em; padding:1em .5em; text-align:center; color:#ffffff; position:absolute; top:50%; right:-0.8em; -webkit-transform:translateY(-50%); transform:translateY(-50%); z-index:999; -webkit-border-radius:50%; border-radius:50%; } .service-content-section .pic-box.one .triangle-numbr:after{ content:"01"; } .service-content-section .pic-box.two .triangle-numbr:after{ content:"02"; } .service-content-section .pic-box.three .triangle-numbr:after{ content:"03"; } .service-content-section .tell-text{ font-family: 'gotham_boldregular'; font-size:5.5vw; line-height:.77em; text-align:right; color:#000000; text-decoration:none !important; } .service-content-section .tell-text span{ color:#f40c0c; } .service-content-section .more-holder{ height:17vw; background:#e11316; position:relative; } .service-content-section .more-holder img{ width:50px; position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translateY(-50%, -50%); } .service-content-section > div{ padding:3em; border-bottom:1px solid #bfbebe; } .service-content-section > div:nth-child(odd){ border-right:1px solid #bfbebe; padding-left:0; } .service-content-section > div:nth-child(even){ padding-right:0; } .service-content-section > div:nth-last-child(2){ border-bottom:none; } .digi-marketing .service-content-section > div:nth-last-child(2){ border-bottom:1px solid #bfbebe; } .mob-app .service-content-section > div:first-child{ border-bottom:none; } .mob-app .service-content-section > div:nth-last-child(2){ border-bottom:1px solid #bfbebe; } .service-content-section > div:last-child{ border-right:none; border-bottom:none; } .service-content-section h3{ color:#000000; font-size:1.3em; font-family: 'gotham_boldregular'; line-height:1em; text-transform:uppercase; margin:0; padding:0 0 1em; text-align:left; } .service-content-section p{ font-size:0.84em !important; line-height:1.5em !important; color:#747272 !important; } .service-content-section ol{ margin:0px !important; display: block !important; margin-before: 0px !important; margin-after: 0px !important; margin-start: 20px !important; margin-end: 0px !important; padding-start: 20px !important; -webkit-margin-before: 0px !important; -webkit-margin-after: 0px !important; -webkit-margin-start: 0px !important; -webkit-margin-end: 0px !important; -webkit-padding-start: 20px !important; -ms-margin-before: 0px !important; -ms-margin-after: 0px !important; -ms-margin-start: 0px !important; -ms-margin-end: 0px !important; -ms-padding-start: 20px !important; -moz-margin-before: 0px !important; -moz-margin-after: 0px !important; -moz-margin-start: 0px !important; -moz-margin-end: 0px !important; -moz-padding-start: 20px !important; -o-margin-before: 0px !important; -o-margin-after: 0px !important; -o-margin-start: 0px !important; -o-margin-end: 0px !important; -o-padding-start: 20px !important; } .service-content-section ol li{ font-family: 'open_sansregular'; font-size:0.84em; color: #747272; line-height:1.5em; padding-bottom:1em; } .service-content-section ul{ margin:0px !important; display: block !important; list-style-type: disc !important; margin-before: 0px !important; margin-after: 0px !important; margin-start: 20px !important; margin-end: 0px !important; padding-start: 20px !important; -webkit-margin-before: 0px !important; -webkit-margin-after: 0px !important; -webkit-margin-start: 0px !important; -webkit-margin-end: 0px !important; -webkit-padding-start: 20px !important; -ms-margin-before: 0px !important; -ms-margin-after: 0px !important; -ms-margin-start: 0px !important; -ms-margin-end: 0px !important; -ms-padding-start: 20px !important; -moz-margin-before: 0px !important; -moz-margin-after: 0px !important; -moz-margin-start: 0px !important; -moz-margin-end: 0px !important; -moz-padding-start: 20px !important; -o-margin-before: 0px !important; -o-margin-after: 0px !important; -o-margin-start: 0px !important; -o-margin-end: 0px !important; -o-padding-start: 20px !important; } .service-content-section ul li{ list-style:none; list-style-image: url(../img/direction-list-red.png); color:#7e7b7b; font-family: 'open_sansregular'; font-size: .9em; line-height: 2.3em; } /*new css 21/01/2017*/ .panel-group .panel { border-radius: 0; box-shadow: none; border-color: #EEEEEE; } .panel-default > .panel-heading { padding: 0; border-radius: 0; color: #212121; background-color: #EBEBEB; border-color: #EEEEEE; } .panel-title { font-size: 14px; } .panel-title > a { display: block; padding: 15px; text-decoration: none; } .more-less { float: right; color: #ff1414; } .panel-default > .panel-heading + .panel-collapse > .panel-body { border-top-color: #EEEEEE; } .left-side{} .left-side h6{ text-transform:uppercase; font-size:18px; letter-spacing:2px; font-family: 'robotoblack'; color:#000; margin-bottom:3%; } .left-side h6 span{ color:#ff1414; } /*new css 21/01/2017*/ /* media quries */ @media (max-width: 1325px) { } @media (max-width: 1200px) { .slider_caption ul li h1{ font-size:55px; line-height:.8em; } .first-block{ padding:3em 2em; } .second-block{ padding: 0 2em 2.5em; } .third-block .phase .text{ padding: 15px 0px; } .third-block .phase { margin-top: 55px; margin-bottom: 20px; } .fourth-block{ padding:3.5em 2em 2.5em; } .fourth-block .second-row{ display:inline-flex; } .fourth-block .second-row .icon-holder{ padding-left:0px; padding-right:0px; } .fourth-block .second-row .content-holder{ padding-left:0px; padding-right:0px; padding-top:15px; } .fourth-block .second-row .content-holder h4{ text-align:center; } .fourth-block .second-row .content-holder p{ text-align:center; } .footer-block{ padding: 3em 2em; } .testimonials .item{ padding:33px 20px; min-height:inherit; } .page-title{ font-size: 3.3em; } .inner-content-block{ padding:2em; } .service-content-section > div{ padding:2em 0; } .service-content-section > div:nth-child(odd){ border-right:none; } .service-content-section { padding: 0 3em; } .service-content-section .pic-box .triangle-numbr svg{ position:relative; right:-28%; } .mob-app .service-content-section > div:first-child{ border-bottom: 1px solid #bfbebe; } } @media (max-width: 992px) { .first-block { padding: 3em 2em 0; } .first-block .services-part{ display:block; } .first-block .services-part > div{ min-height:28vw; padding-bottom:1em; } .first-block .welcome-part h1{ text-align:center; margin-bottom:30px; font-size:22px; line-height: } .first-block .welcome-part p{ padding-bottom: 10px; text-align:center; } .first-block .welcome-part h1:after{ position:absolute; left:50%; transform:translateX(-50%); } .first-block{ text-align:center; } .first-block .welcome-part{ padding-bottom:2em; } .first-block .read-more{ display:inline-block; float:none; } .first-block .services-part > div .total-item{ border-bottom: 2px solid #e30202; } .col-8{ width:25%; } .third-block { padding: 0 2em 2em; } .third-block .discuss a{ font-size: 36px; } .third-block .phase > div{ min-height:127px; } .testimonials .item{ padding: 20px 15px; } .testimonials .item .content h5{ text-align:center; } .testimonials .item .content p{ text-align:center; } .testimonials .item .pic{ margin-bottom:15px; } .testimonials .item .content{ text-align:center; } .testimonials .item .content a{ display:inline-block; } .fourth-block .second-row > div{ padding: 20px 15px; } .fourth-block .quick-enq{ padding-bottom:15px; } .fourth-block .map-holder #map { height:280px; } .fourth-block .second-row .content-holder h4{ font-size: 22px; padding-bottom: 10px; } .fourth-block .second-row .content-holder p{ font-size: 14px; line-height: 18px; } .fourth-block .first-row{ margin-bottom:0; } .social-col{ border-top:1px solid #afb4bc; margin-top:15px; padding-top:15px; } .footer-block .social-col h4{ text-align:center; } .footer-block .social-col ul{ width:100%; text-align:center; } .footer-block .social-col ul li{ display:inline-block; float:none; } .footer-block { padding: 2.5em 2em; } .second-block .projects-block{ height:33vw; } .second-block .projects-block .pic-part{ width:100%; } .second-block .projects-block .content-part:before{ display:none; } .second-block .projects-block .content-part{ width:100%; height:auto; padding: 40px 33px; } .second-block .projects-block .pic-part ul li img{ height: auto; } .second-block .projects-block a.control_prev_proj, .second-block .projects-block a.control_next_proj{ width:40px; height:40px; padding:6px; border: 2px solid #ffffff; bottom:20px; } .second-block .projects-block a.control_prev_proj img, .second-block .projects-block a.control_next_proj img{ width:50%; } .second-block .projects-block a.control_next_proj{ right:20px; } .second-block .projects-block a.control_prev_proj { right: 70px; } .inner-head-block{ height: 33vw; } .page-title { font-size:2.5em; border-bottom: 3px solid #ff1414; } .service-title-section .short-description{ padding:2em; padding-bottom:0; } .service-title-section .short-description p{ font-size: 1em; } .service-content-section h3{ font-size: 1em; padding: 0 0 .5em; } .service-content-section .pic-box .triangle-numbr:after{ width: 60px; height: 60px; font-size: 1.2em; padding: 1.3em .5em; } } @media (max-width: 800px) { } @media (max-width: 768px) { .loader-logo .logo-maple img{ width:25%; } .header-block .menu-holder .menu-text { right: 72px; font-size: 12px; top: 30px; } .header-block .logo{ width:18%; min-width:92px; height:auto; top: 20px; left: 25px; } .first-block{ padding:2em 1.5em; } .first-block .services-part > div{ min-height:auto; padding-bottom:1em; } .first-block .services-part > div .service-icon{ width: 12vh; } .first-block .services-part h3{ padding-bottom: 10px; text-align:center; } .first-block .services-part > div .total-item { border-bottom: 1px solid #e30202; } .first-block .services-part p{ padding-bottom: 20px; text-align:center; } .first-block .video-thumb{ height:35vw; } .first-block .services-part .icon{ text-align:center; } .col-8{ width:33.333%; } .fourth-block .second-row{ display:block; } .fourth-block .first-row{ margin-bottom:25px; } .copyright-holder{ padding-bottom:20px; text-align:center; border-bottom: 1px solid #afb4bc; margin-bottom:20px; } .copyright{ } .footer-block .copyright .logo{ text-align:center; padding-bottom:12px; } .footer-block .copyright .text{ text-align:center; } .fourth-block { padding: 2.5em 1.5em 2.5em; } .footer-block { padding: 2em 1.5em; } .baner-block .dot-line{ width:100%; } .slider_caption ul li h1{ font-size:6vw; line-height:.8em; } .second-block .projects-block{ height:40vw; } .second-block { padding: 0 1.5em 1.5em; } .special-holder{ display:block; } .footer-block .copyright .logo img{ width:20%; min-width:100px; } .footer-block ul li{ line-height:22px; font-size:13px; } .footer-block h4{ font-size:13px; } .footer-block .copyright .text{ font-size:13px; } .inner-content-block { padding: 1.5em 1em; } .inner-content-block .content-box{ padding:1.5em; } .pic-about{ margin-bottom:1.5em; } .inner-content-block .content-box h1{ font-size: 1.1em; } .inner-content-block .content-box p{ font-size: .8em; line-height: 1.4em; } .inner-content-block .content-box h2{ font-size:1em; } .inner-content-block .content-box ul li{ font-size: .8em; line-height: 2.0em; } .default-button{ font-size: 11px; padding: 16px 20px; } .service-title-section .red-part .circle-holder .pic img{ border: .85em solid #e41f22; } .service-title-section .red-part .circle-holder .pic{ padding: .7em; } .service-title-section .short-description{ padding: 13vw 2em; padding-bottom: 0; } .service-title-section .short-description p{ width:100%; font-size:.95em; } .service-content-section { padding: 0 2em; } .service-content-section .pic-box{ height: 50vw; margin-bottom:1em; } .service-content-section > div { padding: 1.5em 0; } .service-content-section .tell-text{ font-size: 5.5vw; padding-bottom: .7em; text-align:center; } .service-content-section .more-holder{ height: 15vw; } .service-content-section .more-holder img{ width: 35px; } .web-des-dev .service-content-section .tell-holder{ padding-top:0 !important; } } @media (max-width: 650px){ .testimonials .item:nth-child(odd){ border-right:none; } .testimonials .item:nth-child(odd):after{ display:none; } .testimonials .item { padding: 20px 5px; } .page-title{ font-size: 2em; } } @media (max-width: 500px) { .first-block .welcome-part h1{ font-size: 20px; line-height:20px; } } @media (max-width: 485px) { .header-block .menu-holder .menu-text{ display:none; } a.control_next { right: 3%; -moz-transform:scale(.7); -webkit-transform:scale(.7); transform:scale(.7); } a.control_prev { left: 3%; -moz-transform:scale(.7); -webkit-transform:scale(.7); transform:scale(.7); } .slider_caption ul li h1{ font-size:10vw; } .page-title { font-size: 1.7em; } } @media (max-width: 463px) { .first-block .video-thumb .play .play-button{ width:50px; height:50px; } } @media (max-width: 425px) { .first-block .video-thumb{ height: 55vw; } .col-8{ width:50%; } .loader-logo .logo-maple img{ width:35%; } .inner-head-block{ height: 45vw; } } @media (max-width: 380px) { .loader-logo .logo-maple img{ width:50%; } .first-block .welcome-part h1 { font-size: 16px; line-height: 16px; } .first-block .services-part h3{ font-size:18px; } .second-block h2{ font-size: 18px; line-height: 18px; margin-bottom: 26px; } .second-block p{ font-size:14px; } .first-block .services-part p{ font-size:14px; } .third-block h2{ font-size: 18px; line-height: 18px; } a.control_next { right: 0; -moz-transform:scale(.5); -webkit-transform:scale(.5); transform:scale(.5); } a.control_prev { left: 0; -moz-transform:scale(.5); -webkit-transform:scale(.5); transform:scale(.5); } .header-block .logo{ top: 13px; left: 13px; } .baner-block .arrow-down{ width: 15px; right: 10px; bottom: 40px; } .baner-block .slider_image, .baner-block .slider-circle, .baner-block .outer-circle-1, .baner-block .outer-circle-2, .baner-block .outer-circle-3, .baner-block .outer-circle-4{ z-index:999; } .baner-block .dot-line{ background:none; } .footer-block { padding: 1.5em 1em; } .first-block{ padding:2em 1em; } .company-of-home{ width:100%; text-align:center; padding-bottom:20px; } .services-of-home{ width:100%; text-align:center; } .footer-block h4{ text-align:center; } .footer-block h4{ padding-bottom:8px; } .fourth-block { padding: 2em 1em 0; } .second-block { padding: 0 1em 2em; } .third-block .discuss a { font-size: 24px; line-height: 24px; padding-bottom:18px; } .third-block .discuss a:after{ width:90px; height:3px; bottom:0; } .second-block .projects-block{ height: 53vw; margin-left:-1em; margin-right:-1em; } .first-block .video-thumb{ margin-left:-1em; margin-right:-1em; } .first-block .seo-score{ margin-left:-1em; margin-right:-1em; } .fourth-block .map-holder{ padding-left:0; padding-right:0; } .fourth-block .second-row{ margin-left:-1em; margin-right:-1em; width:auto; } .second-block .projects-block .content-part{ padding: 28px 25px; } .second-block .projects-block .content-part ul li.active .project-name{ font-size: 22px; line-height: 16px; } .second-block .projects-block .content-part ul li.active .project-des{ font-size: 13px; line-height: 16px; } .second-block .projects-block .content-part ul li.active .technologies .item{ padding:0; } .second-block .projects-block .content-part ul li.active .technologies .item img{ width:75%; } .second-block .projects-block .content-part ul li.active .technologies{ padding-bottom:10px; } .second-block .projects-block .content-part ul li.active .view{ font-size: 10px; letter-spacing: 6px; padding: 12px 33px; } .fourth-block .quick-enq .form-styler{ font-size:13px; height: 40px; } .social li{ padding: 0px 10px; } .third-block .phase{ margin-top: 35px; } .second-block .projects-block a.control_prev_proj, .second-block .projects-block a.control_next_proj{ width:35px; height:35px; padding:2px; bottom:12px; } .second-block .projects-block a.control_next_proj{ right:12px; } .second-block .projects-block a.control_prev_proj{ right:52px; } .second-block .projects-block a.control_prev_proj img, .second-block .projects-block a.control_next_proj img{ width:40%; } .inner-head-block{ height: 50vw; } .page-title { font-size: 1.4em; line-height: 0.7em; } .inner-content-block { padding: .5em .5em; } .inner-content-block .content-box{ padding:1em; } .inner-content-block .content-box h1{ font-size:1em; } .default-button{ width:100%; text-align:center; } .service-title-section .red-part .circle-holder .pic img{ border: .5em solid #e41f22; } .service-title-section .red-part .circle-holder .pic{ padding: .5em; } .service-content-section h3 { font-size: .85em; } .service-content-section { padding: 0 1.2em; } .service-title-section .short-description{ padding: 13vw 1.2em; padding-bottom:0; } .service-content-section .more-holder { height: 20vw; } .service-content-section .more-holder img { width: 25px; } .service-content-section .tell-text{ font-size: 9.5vw; line-height: .9em; } } @media (max-width: 350px) { } @media (max-width: 310px) { .col-8{ width:100%; } .third-block .phase > div{ min-height: inherit; border-bottom:1px solid #afb4bc; padding:15px; } .third-block .phase > div:last-child{ border-bottom:none; } .third-block .phase .text{ padding: 15px 15px 0px; } } a:focus{ outline:none !important; } .services-part a:hover{ text-decoration:none !important; } .spider-web-container-new svg{ } /*.spider-web-container-new .vector line, path { stroke: #000; }*/ .spider-web-container-new{ width: 12vw; height: 12vw; position: relative; z-index:999; display: inline-block; left: 50%; -o-transform: translate(-50%) rotate(15deg); -moz-transform: translate(-50%) rotate(15deg); -webkit-transform: translate(-50%) rotate(15deg); transform: translate(-50%) rotate(15deg); margin-bottom: -7%; } .spider-web-container-new .webs{ height:6.1vw; overflow:hidden; } .spider-web-container-new .vector { height: auto; width: 100%; overflow: hidden; position: relative; } .spider-web-container-new .vector svg { height: 100%; width: 100%; } .spider-web-container-new .vector line,path { /* stroke: #9d9c9c; stroke-width: 4px; fill: none;*/ } .spider-web-container-new .web-1 .vector{ -moz-transform: scale(-1, -1) translateY(16px); -o-transform: scale(-1, -1) translateY(16px); -webkit-transform: scale(-1, -1 ) translateY(16px); transform: scale(-1, -1) translateY(16px); right:0px; } .spider-web-container-new .web-2 .vector{ -moz-transform: scaleY(-1) translateY(16px); -o-transform: scaleY(-1) translateY(16px); -webkit-transform: scaleY(-1) translateY(16px); transform: scaleY(-1) translateY(16px); filter: FlipV; -ms-filter: "FlipV"; } .spider-web-container-new .web-3 .vector{ -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; right:-2px; } .spider-web-container-new .web-4{} .spider-web-container-new .spider{ margin:0 auto; text-align:center; position: absolute; z-index: 999; left: 50%; top: 50%; -o-transform: translate(-50% , -50%) rotate(-15deg); -moz-transform: translate(-50% , -50%) rotate(-15deg); -webkit-transform: translate(-50% , -50%) rotate(-15deg); transform: translate(-50% , -50%) rotate(-15deg); } .spider-web-container-new .spider img{ margin:0 auto; text-align:center; width:70%; } .spider-web-container-new .spider img { -webkit-animation-name: linkQuake; -moz-animation-name: linkQuake; animation-name: linkQuake; -webkit-animation-duration: 3s; -moz-animation-duration: 3s; animation-duration: 3s; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; animation-timing-function: linear; } @keyframes linkQuake { 0% { transform: translate(2px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(0px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 1px) rotate(-1deg); } 60% { transform: translate(-3px, -2px) rotate(0deg); } 70% { transform: translate(2px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -2px) rotate(1deg); } 90% { transform: translate(2px, -1px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } } @-moz-keyframes linkQuake { 0% { -moz-transform: translate(2px, 1px) rotate(0deg); } 10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); } 20% { -moz-transform: translate(-3px, 0px) rotate(1deg); } 30% { -moz-transform: translate(0px, 2px) rotate(0deg); } 40% { -moz-transform: translate(1px, -1px) rotate(1deg); } 50% { -moz-transform: translate(-1px, 1px) rotate(-1deg); } 60% { -moz-transform: translate(-3px, -2px) rotate(0deg); } 70% { -moz-transform: translate(2px, 1px) rotate(-1deg); } 80% { -moz-transform: translate(-1px, -2px) rotate(1deg); } 90% { -moz-transform: translate(2px, -1px) rotate(0deg); } 100% { -moz-transform: translate(1px, -2px) rotate(-1deg); } } @-webkit-keyframes linkQuake { 0% { -webkit-transform: translate(2px, 1px) rotate(0deg); } 10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); } 20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); } 30% { -webkit-transform: translate(0px, 2px) rotate(0deg); } 40% { -webkit-transform: translate(1px, -1px) rotate(1deg); } 50% { -webkit-transform: translate(-1px, 1px) rotate(-1deg); } 60% { -webkit-transform: translate(-3px, -2px) rotate(0deg); } 70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); } 80% { -webkit-transform: translate(-1px, -2px) rotate(1deg); } 90% { -webkit-transform: translate(2px, -1px) rotate(0deg); } 100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); } } .pic-part .grid figure { position: relative; float: left; overflow: hidden; /*margin: 10px 1%; min-width: 320px; max-width: 480px; max-height: 360px;*/ width: 100%; height: auto; background: #072538 ; text-align: center; cursor: pointer; } .pic-part .grid figure img { position: relative; display: block; min-height: 100%; max-width: 100%; opacity: 0.8; } .pic-part figure.effect-apollo { background: #072538; } .pic-part figure.effect-apollo img { opacity: 0.95; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale3d(1.05,1.05,1); transform: scale3d(1.05,1.05,1); } .pic-part figure.effect-apollo figcaption::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15,39,53,0.5); content: ''; -webkit-transition: -webkit-transform 0.6s; transition: transform 0.6s; -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0); transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0); } .pic-part figure.effect-apollo p { position: absolute; right: 0; bottom: 0; margin: 3em; padding: 0 1em; max-width: 150px; border-right: 4px solid #fff; text-align: right; opacity: 0; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; } .pic-part figure.effect-apollo h2 { text-align: left; } .pic-part figure.effect-apollo:hover img { opacity: 0.6; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); } .pic-part figure.effect-apollo:hover figcaption::before { -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0); transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0); } .pic-part figure.effect-apollo:hover p { opacity: 1; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .pic-part .grid { position: relative; clear: both; margin: 0 auto; /*padding: 1em 0 4em; max-width: 1000px;*/ list-style: none; text-align: center; } .pic-part .grid figure p { word-spacing: -0.15em; font-weight: 300; border:none; } .pic-part .grid figure h2 span { font-weight: 800; } .pic-part .grid figure figcaption::before, .pic-part .grid figure figcaption::after { pointer-events: none; } .pic-part .grid figure figcaption, .pic-part .grid figure figcaption > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .portfolioul{} .portfolioul li{ width:auto !important; margin-right:15px;} .portfolioul li img{ width:70%; } @media (max-width: 767px) { .spider-web-container-new{ display:none; } .third-block h2{ margin-top:0; } } /* new css 18/07/2017 */ #menu { text-align: center; margin: 0 auto; padding: 0; z-index:9999999; } .fixed { position: fixed; top: -15px; left: 0; width: 100%; background: #0f2735; height: 145px; } .default {} .sticky-container{ left:0; } .sticky-container .top-social { width: 200px; height: 220px; position: fixed; top: 12em; perspective: 1000px; z-index:99999; padding:0; left:0; } .sticky-container .top-social li{ list-style:none; } .sticky-container .top-social li a { display: block; height: 45px; width: 40px; background: #e30202; border-bottom: 1px solid #cd0000; font: normal normal normal 14px/20px 'FontAwesome', 'Source Sans Pro', Helvetica, Arial, sans-serif; color: #fff; -webkit-font-smoothing: antialiased; padding: 10px; text-decoration: none; text-align: center; transition: background .5s ease .300ms } .sticky-container .top-social li:first-child a:hover { background: #3b5998 } .sticky-container .top-social li:nth-child(2) a:hover { background: #8739a7 } .sticky-container .top-social li:nth-child(3) a:hover { background: #00adef } .sticky-container .top-social li:nth-child(4) a:hover { background: #00b6f1 } .sticky-container .top-social li:last-child a { border-bottom:none; } .sticky-container .top-social li a span { width: 115px; float: left; text-align: center; background: #222; color: #fff; margin: -25px 45px; padding: 8px; transform-origin: 0; visibility: hidden; opacity: 0; transform: rotateY(45deg); border-radius: 5px; transition: all .5s ease .300ms } .sticky-container .top-social li span:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: -20px; top: 7px; border-left: 10px solid transparent; border-right: 10px solid #222; border-bottom: 10px solid transparent; border-top: 10px solid transparent; } .sticky-container .top-social li a:hover span { visibility: visible; opacity: 1; transform: rotateY(0) } .inner-content-block .breadcrumb-holder{} .inner-content-block .breadcrumb-holder .breadcrumb { background-color:transparent; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; padding: 1.6em; margin-bottom: 0px; font-size:1em !important; color:#000000 !important; font-family: 'open_sansregular' !important; text-align:center; margin-bottom:1em; } .inner-content-block .breadcrumb-holder .breadcrumb .active { color:#000000; font-family: 'robotoblack' !important; } /*change breadcrumb links color*/ .inner-content-block .breadcrumb-holder .breadcrumb a { color: #000000; } .breadcrumb-holder .breadcrumb a:hover { text-decoration: none; } /*change active color*/ .inner-content-block .breadcrumb-holder .breadcrumb > .active { color: #ff1414 !important; } /*change breadcrumb separator to raquo symbol*/ .inner-content-block .breadcrumb-holder .breadcrumb > li + li:before { color: #8e8d8d !important; content:">>"; font-family: 'open_sansregular' !important; } .inner-content-block .site-map{} .inner-content-block .site-map ul{} .inner-content-block .site-map ul li{ color:#000; line-height: 25px; font-size: 15px; padding: 5px 0px; font-family: 'robotolight'; color: #6c6767; cursor: pointer; list-style-image: url(../img/dot.png); } .inner-content-block .site-map ul li a { color: #6c6767; text-decoration: none; } .inner-content-block .site-map ul ul{ padding-left:3em; } .inner-content-block .site-map ul ul li{ list-style-image: url(../img/arrow.png); } @media (max-width: 767px) { .fixed{ height:100px; } .inner-content-block .site-map ul li{ font-size:13px; line-height: 23px; } } @media (max-width: 380px) { .fixed{ height:90px; } }