/*=============== Fonts Used Playfair Display, Montserrat and Lato ===================*/ @import url(https://fonts.googleapis.com/css?family=Poppins:100,300,100italic,300italic,400,400italic,700,700italic,900,900italic&display=swap);@import url(https://fonts.googleapis.com/css?family=Lato:100,300,100italic,300italic,400,400italic,700,700italic,900,900italic&display=swap); /*===================== TABLE OF CONTENT ===================*/ :root { --offset-2:2px; --offset: 6px; --bg-shape-color: linear-gradient(120deg, #343A4F, #0F1620); --lightestblue : #d7f4ff; --lightblue: #1d9de4; --primaryblue: #1b92d0; --primarybluetransparent: rgba(25,146,208,0.90); --transparentwhite : rgba(255,255,255,0.75); --transparentwhite2 : rgba(255,255,255,0.25); --secondaryblue: #1e83c6; --tertiarycolor: #90a4ae; --lighttertiarycolor:#ebebeb; --lightgrey:#595959; --darkgrey:#2e3b41; --darkblue: #0e3c95; --text-color: #D5E1EF; --red:#d20f0f; --white: #fff; --green:#4cb129; --black: #323135; --yeellow: #ffc000; --gradientblue : rgba(0, 0, 0, 0) linear-gradient(to right, #3164c9 0%, rgb(66 157 238) 100%) repeat scroll 0 0; --timeline-gradient: rgba(206, 233, 228, 1) 0%, rgba(206, 233, 228, 1) 50%, rgba(206, 233, 228, 0) 100%; --themedborder:75px 10px; --themedbordermedium:40px 5px; --themedbordersmall:20px 5px; } /*=============== General Styling ===================*/ body,html{ min-height:100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width:100%; background:#fff; height: 100%; } ::selection { background: var(--lightestblue); color: var(--black); text-shadow: none; }  ::-moz-selection { background: var(--lightestblue); color: var(--black); text-shadow: none; } a{ color : var(--primaryblue); } .slideDown{ animation-name: slideDown; -webkit-animation-name: slideDown;  animation-duration: 500ms; -webkit-animation-duration: 500ms;  animation-timing-function: ease; -webkit-animation-timing-function: ease;  visibility: visible !important; }  @keyframes slideDown { 0% { transform: translateY(-100%); } 100% { transform: translateY(0%); } }  @-webkit-keyframes slideDown { 0% { -webkit-transform: translateY(-100%); } 50%{ -webkit-transform: translateY(8%); } 100% { -webkit-transform: translateY(0%); } } *,:after,:before{ box-sizing:inherit; }  /* Scrollbar Styles */ ::-webkit-scrollbar { width: 10px; /* Width of the scrollbar */ } /* Track */ ::-webkit-scrollbar-track { background: transparent; /* Color of the track */ } /* Handle */ ::-webkit-scrollbar-thumb { background: var(--primaryblue); /* Color of the scroll handle */ border-radius: 5px; /* Rounded corners */ } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: var(--lightblue); /* Color on hover */ opacity: 0.90; } body{ float:left; width:100%; font-family:'Poppins'; letter-spacing:0.3px; position:relative; } h1,h2,h3,h4,h5,h6{ font-family:'Open Sans'; color:#010000; } video{ width : 100%; margin: 20px auto; } p{ font-family: 'Poppins'; color: #0e0e0e; line-height: 28px; letter-spacing: 0; font-size: 16px; } .cursor-arrow{ cursor: default !important; } ul li, ol li{ font-family:'Poppins'; color:#000; line-height: 28px; letter-spacing: 0; font-size: 16px; } a:hover, a:focus{ text-decoration:none; outline:none; } .light{ font-weight: 300; } .normal{ font-weight: 400; } .medium{ font-weight: 500; } .semi_Bold{ font-weight: 600; } .bold{ font-weight: 700; } .underline{ text-decoration: underline; } .theme-layout { float: left; overflow: hidden; position: relative; width: 100%; } .theme-layout.boxed{ background:none repeat scroll 0 0 #FFFFFF; float:none; margin:0 auto; overflow:hidden; position:relative; z-index:1; width:1230px; -webkit-box-shadow:0 0 6px #747474; -moz-box-shadow:0 0 6px #747474; -ms-box-shadow:0 0 6px #747474; -o-box-shadow:0 0 6px #747474; box-shadow:0 0 6px #747474; } section{ float:left; position:relative; width:100%; } .block{ float:left; width:100%; padding:120px 0; position:relative; z-index:1; overflow: hidden; }  .with-bg { background-size: cover; background-position: center; } @media screen and (min-width: 1200px) {  .boxed-container .themed-container, .boxed-container .themed-container-fluid{ display: flex; align-items: stretch; flex: 1; box-sizing: border-box; } .boxed-container .block * { margin:0; line-height: 1.5; vertical-align: middle; } } @media screen and (max-width: 1199px) { .boxed-container .themed-container, .boxed-container .themed-container-fluid{ display: block; } .boxed-container .block { padding: 10px; line-break: auto; } .with-bg { height: 280px; background-size: cover; background-position: center; } } .block.short-space { padding:30px 0 } .block.extra-gap { padding:120px 0 200px } .block.less-spacing{ padding:80px 0 } .block .container{ padding:0; } .container{ padding:0; } .block .container-fluid{ padding:0; } .container-fluid{ padding:0; } .block.remove-gap{ padding-top:0; } .block.no-padding{ padding:0; } .block.remove-bottom{ padding-bottom:0; } .block.gray,.gray{ background-color:#fbfbfb; } .block.dark{ background:#242424 } .block.gray2,.gray2{ background-color:#ecf1f5; } .p20-10{ padding : 20px 10px; } .p20{ padding : 20px; } .overlap{ margin-top:-150px; z-index:2; } .remove-ext{ float:left; margin-bottom:-30px; width:100%; } iframe{ width:100%; border:0; } .parallax,.fixed-bg{ background-size:cover!important; height:100%; width:100%; margin:0; position:absolute; left:0; top:0; z-index:-1; } .fixed-bg{ background-attachment:fixed !important; background-size:cover!important; } .parallax.still { background-position: 0 0 !important; } .parallax.png { background-position: 0 center !important; background-size: auto auto !important; } .blackish:before,.whitish:before{ background:none repeat scroll 0 0 #101010; content:""; height:100%; left:0; opacity:0.63; position:absolute; top:0; width:100%; z-index:0; } /*Home creative banner gsap begins*/  .breaker{ width:100%; height: 100vh; } .header-banner .wrapper, .header-banner .content { position: relative; width: 100%; z-index: 1; }  .header-banner .content { overflow: hidden; }  .header-banner .content .section.hero { width: 100%; height: 100vh; display: flex; flex-direction: column; } .header-banner .content .section { width: 100%; height: 100px; display: flex; flex-direction: column; } .header-banner .image-container { width: 100%; height: 100vh; position: absolute; top: 0; left: 0; right: 0; z-index: 2; perspective: 500px; overflow: hidden; }  .header-banner .image-container img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } /*Home creative banner gsap ends*/   .home .themish:before,.themish:before{ background:none repeat scroll 0 0 rgb(4,44,67); opacity:0.65; } .themish:before,.themish:before{ background:none repeat scroll 0 0 #37474f; content:""; height:100%; left:0; opacity:1; position:absolute; top:0; width:100%; z-index:0; } .coloured:before{ opacity:0.9; } .whitish:before{ background-color:#f8f8f8; opacity:0.9; } .block.boxed-layer { padding: 110px 0; } .boxed-layer::before { background-clip: content-box; padding: 30px; } .white-wrapper { float: left; width: 100%; padding: 100px; background:rgba(255, 255, 255, 0.9); } .parallax.half { width: 50%; } .parallax.half:nth-child(2n) { left: 50%; } .fancy-cols > div { padding: 110px 120px; } iframe{ border:0; width:100%; float:left; } a:hover, a:focus{ color:unset; } .poptrox-overlay{ z-index:10000000000!important } .wdth530 { width: 530px; } /*=============== Cross Browser Compatibility ===================*/ .service > span:before, .service > span:after, .service > span i, .work:before, .slick-slide, .slick-arrow, .portfolio > img, .portfolio:before, .portfolio:after, .owl-dot, .tab-description li:before, .image-box:before, .video-play, .product-thumbs, .cart-btn, .about-box:before, .about-hover, .classic-portfolio > img, .classic-portfolio:before, .classic-portfolio-hover > h4, .classic-portfolio-hover > span, .widget li, .widget li:before, .widget li span, .simple-service i, .picture img, .masonary,.masonary2, .case-study > img, .video:before, .add-box i, .project-box:before, .cart-product h3 a, .cart-btns > button, .creative-box-overlay, .creative-service:hover > span, .responsive-links, body, .member > a:before, .member > a:after, .gallery-widget > a:hover:before, .about-project-carousel .owl-nav, .toggle-item h3, .menu > ul li a, .menu > ul li, .share-link a, header, .logo img { -webkit-transition:all 0.25s linear; -moz-transition:all 0.25s linear; -ms-transition:all 0.25s linear; -o-transition:all 0.25s linear; transition:all 0.25s linear; }  .service > span:before, .service > span:after, .service > span, .project-hover a, .round-img, .member-social > a, .service-name > span, .work-hover > a, .ceo-message > img, .fun-facts:before, .thumb > img, .slick-arrow, .social > a, .social > a:before, .portfolio-hover > a, .owl-nav > div, a.play-round, .owl-dot, .creative-tabs .nav li a, .task > a, .team-img > a, .bulletpoints li:before, .tab-description li:before, .news-author, .about-slide span, .team-intro-social a, .video-play, .creative-service > span, .professional-member-detail .skill-round > div:before, .fancy-post-author > img, .innovative-title h2:before, .widget li span, .tagcloud > a:before, .video > a, .header-options > a span, .layer8, .share-link a{ -webkit-border-radius:20%; -moz-border-radius:20%; -ms-border-radius:20%; -o-border-radius:20%; border-radius:20%; }  .nav>li>a:focus, .nav>li>a:hover { text-decoration: none; background-color: var(--lightestblue); }  a.small-btn, .social-share > a{ -webkit-border-radius:2px; -moz-border-radius:2px; -ms-border-radius:2px; -o-border-radius:2px; border-radius:2px; }   /*=============== Mega Menu ===================*/ .megamenu { background: transparent url("../images/megamenu.jpg") no-repeat scroll 0 0 / cover ; left: 0; padding: 30px 10px; position: absolute; top: 100%; visibility:hidden; opacity:0; -webkit-transform:translateY(100px); -moz-transform:translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -webkit-transition: all 800ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */ -webkit-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */  -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */ -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */ } nav ul li:hover .megamenu{ opacity:1; visibility:visible; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); }  .megamenu::before { background: #201f1f none repeat scroll 0 0; content: ""; height: 100%; left: 0; opacity: 0.88; position: absolute; top: 0; width: 100%; } .megamenu > div { border-right: 1px solid #343434 } .megamenu a { color: #b5b5b5; float: left; font-family: 'Poppins'; font-size: 13px; letter-spacing: 0.2px; padding: 8px 12px; width: 100%; -webkit-transition: all 0.3s ease 0.5s; -moz-transition: all 0.3s ease 0.5s; -ms-transition: all 0.3s ease 0.5s; -o-transition: all 0.3s ease 0.5s; transition: all 0.3s ease 0.5s; } .megamenu > div:last-child { border:0 none } .megamenu a:hover { background: #313131 none repeat scroll 0 0; -webkit-transition: all 0.2s linear 0s; -moz-transition: all 0.2s linear 0s; -ms-transition: all 0.2s linear 0s; -o-transition: all 0.2s linear 0s; transition: all 0.2s linear 0s; } /*=================== Sideheader ====================*/ .sideheader{ background: rgba(0, 0, 0, 0) url("../images/sideheader-bg.jpg") no-repeat scroll 0 0 / cover ; height: 100%; left: -330px; padding:150px 50px 50px !important; position: fixed; top: 0; width: 330px!important; z-index: 10000; } .sideheader:before{ background: black none repeat scroll 0 0; content: ""; height: 100%; left: -330px; opacity: 0.7; position: fixed; top: 0; width: 330px; z-index: -1; } body,.sideheader,.sideheader:before{ -webkit-transition: all 600ms cubic-bezier(0.165, 0.840, 0.440, 1.000); -moz-transition: all 600ms cubic-bezier(0.165, 0.840, 0.440, 1.000); -o-transition: all 600ms cubic-bezier(0.165, 0.840, 0.440, 1.000); transition: all 600ms cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */  -webkit-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); -moz-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); -o-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */ } .sideheader.slidein, .sideheader.slidein:before{ left:0 } body.move{ margin-left:330px } .scrolling{ float:left; width:100%!important; height:100%; } .sideheader .logo { margin: 0 0 40px; padding: 0; text-align: center; } .sideheader > span { color: #fff; font-size: 30px; left: 50px; line-height: 30px; position: fixed; top: 50px; z-index: 10000; } .menu { float: left; width: 100%; } .menu > ul { list-style: outside none none; margin: 0; padding: 0; } .menu > ul li { color: #fff; float: left;  font-size: 14px; line-height: 20px; padding: 7px 0; text-transform: uppercase; width: 100%; } .menu > ul li a { color: inherit } .menu > ul li:hover, .menu > ul li.active{ padding-left:5px } .menu ul ul { display: none; float: left; list-style: outside none none; padding: 10px 0 10px 20px; width: 100%; }   /*=============== Slides ===================*/ .layer1{ color:#FFF; font-family: 'Poppins'; font-style: italic; font-weight:300; } .layer2{ color: #FFF;  letter-spacing:1px; font-weight:900; } .layer3{ color: #FFF; font-family: 'Poppins'; } .layer4{ color: #FFF; font-family:'Open Sans'; } .layer5{ font-family: lato } .layer6{ font-family:'Poppins'; border-bottom:2px sol--id #FFF; } .layer7{ color: #FFF; font-family: 'Poppins'; } .layer8{ color:#FFF; text-align: center; } .layer9{ color: #313131;  background: #FFF; } .layer9:hover{ color: #FFF } .layer10{ color:#2e2e2e; font-family: 'Poppins'; font-weight:900; text-transform:uppercase; } .mockup2{ float: left; text-align: center; width: 100%; } .mockup2 img { max-width: 100% } .all-services { float: left; width: 100%; margin-bottom: -30px; } /*=============== Parallax Text ===================*/ .parallax-text { float: left; width: 100%; margin:40px 0; text-align: center; } .parallax-text > span { color: #fff; float: left;  font-size: 13px; letter-spacing: 5px; margin-bottom: 5px; text-transform: uppercase; width: 100%; } .parallax-text h4 { color: #fff; float: left; font-size: 44px; font-weight: 500; letter-spacing: 1px; margin: 0 0 10px; text-transform: uppercase; width: 100%; } .dark-btn { background: #37474f none repeat scroll 0 0; color: #fff; display: inline-block; margin-top:10px;  font-size: 13px; letter-spacing: 1px; padding: 14px 30px; position: relative; text-transform: uppercase; z-index: 1; } .dark-btn:hover, .dark-btn:focus{ color:#FFFFFF } .dark-btn i { display: inline-block; font-size: 16px; margin-right: 5px; vertical-align: middle; } .dark-btn:before, .dark-btn:after{ content: ""; height: 100%; left: 0; opacity:0.5; position: absolute; top: 0; width:0; z-index: -1; -webkit-transition: all 500ms cubic-bezier(1.000, 0.000, 0.000, 1.000); -moz-transition: all 500ms cubic-bezier(1.000, 0.000, 0.000, 1.000); -o-transition: all 500ms cubic-bezier(1.000, 0.000, 0.000, 1.000); transition: all 500ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */  -webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); -moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); -o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */ } .dark-btn:after{ left:auto; right:0; -webkit-transition-delay:0.2s; -moz-transition-delay:0.2s; -ms-transition-delay:0.2s; -o-transition-delay:0.2s; transition-delay:0.2s; } .dark-btn:hover:before, .dark-btn:hover:after{ width:100%; border-radius: 2rem 0; } /*=============== Parallax Text ===================*/ .side-title { float: left; margin-bottom: 20px; width: 100%; } .side-title > span { color: #4a4a4a; float: left; font-family: lato; font-size: 14px; font-style: italic; letter-spacing: 2px; width: 100%; } .side-title > h1, .side-title > h2, .side-title > h3 { float: left; font-size: 26px; font-weight: 600; letter-spacing: 1px; margin: 5px 0 0; width: 100%; } .side-title > h1{ font-size:33px } .side-title > h3 { font-size: 25px; letter-spacing: 1.5px; } .light.side-title > span, .light.side-title > h1, .light.side-title > h2, .light.side-title > h3{ color:#FFFFFF } .side-title > p { color: #6d6d6d; float: left; font-size: 15px; font-weight: 400; margin: 10px 0; width:100%; } .side-title.light > p { color: #cbcbcb } .side-title.center > p{ margin: 10px 20%; width: 60%; } .text { float: left; width: 100%; } .text > p { color: #424242; float: left; font-size: 15px; font-weight: 400; margin: 0; width: 100%; } /*=============== Team ===================*/ .team { float: left; width: 100%; /*margin-bottom: -30px;*/ } .member { float: left; width: 100%; margin-bottom: 15px; } .member > img { width: 100% }  .member > a { float: left; position: relative; width: 100%; z-index: 1; } .member > a:before { background: black none repeat scroll 0 0; content: ""; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 100%; } .member > a:hover:before{ opacity:0.5 } .member > a:hover .member-detail-hover{ opacity : 1; } .member .member-detail-hover { left: 50%; padding: 10px 8px; position: absolute; text-align: center; top: 0; width: 90%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateX(-50%); transition: all 200ms ease-in; opacity: 0; } .member .member-detail-hover h4{ color : #fff; } @media(min-width : 1280px){ .member .member-detail-hover{ top : 20%; } } .member > a::after { background: linear-gradient(to right, rgb(40,147,206), rgba(255,0,0,0) 100%), linear-gradient(to right, rgb(40,147,206), rgba(0,255,0,0) 100%), linear-gradient(to right, rgb(3,34,172), rgb(0,0,255) 100%); background:-webkit-linear-gradient(90deg, rgb(55 114 213), rgb(31, 137, 201) 100%), -webkit-linear-gradient(100deg, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), -webkit-linear-gradient(260deg, rgb(40, 147, 206), rgb(0,0,206) 100%); background: -moz-linear-gradient(90deg, rgb(55 114 213), rgb(31, 137, 201) 100%), -moz-linear-gradient(100deg, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), -moz-linear-gradient(260deg, rgb(40, 147, 206), rgb(0,0,206) 100%); background: -o-linear-gradient(90deg, rgb(55 114 213), rgb(31, 137, 201) 100%), -o-linear-gradient(100deg, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), -o-linear-gradient(260deg, rgb(40, 147, 206), rgb(0,0,206) 100%); background: -ms-linear-gradient(90deg, rgb(55 114 213), rgb(31, 137, 201) 100%), -ms-linear-gradient(100deg, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), -ms-linear-gradient(260deg, rgb(40, 147, 206), rgb(0,0,206) 100%); color: rgba(255,255,255,0.65); content: '\f345'; font-family: 'dashicons'; font-size: 20px; height: 50px; right: 8px; line-height: 50px; position: absolute; text-align: center; bottom: 8px; width: 50px; border-radius: 18px 5px; transition: all 200ms ease-in; } .downloadtab .member > a::after { background:none; content: '\f316'; } .member > a:hover:after{ color : #fff; } .member-name { float: left; margin-top: 5px; width: 100%; min-height: 90px; } .member-name > h4 { color: #2a2a2a; float: left; font-size: 15px; line-height: 18px; margin: 5px 0; width: 100%; } .downloadtab .member-name > h4 { text-align: center; } .masonary .member-name > h4 { color: #2a2a2a; float: left; font-size: 1.5rem; line-height: 2rem; margin: 0 0 3px; width: 100%; text-transform:none; } .member-name > h4 a { color: inherit; } .member-name > span { color: #4a4a4a; float: left; font-family: lato; font-size: 13px; font-style: italic; letter-spacing: 1px; width: 100%; } aside .widget li:before{ content: none; } aside .widget li{ padding-left : 0px; } .team .skill { margin: 0 } .member-social { float: left; margin-top: 10px; width: 100%; } .member-social > a { background: #f2f2f2 none repeat scroll 0 0; color: #2a2a2a; display: inline-block; font-size: 13px; height: 37px; line-height: 37px; margin-right: 5px; text-align: center; width: 37px; } .member-social > a:hover{ color:#FFFFFF } .team.style2{ text-align:center } /*=============== Projects ===================*/ .masonary, .masonary2{ float: left; width: 100%; } .project { float: left; position: relative; width: 100%; margin-bottom:30px; } .custom-grid{ float:left; width:20%; padding:0 15px; } .row.no-gap{ margin:0 } .no-gap > div > div{ padding:0 } .no-gap .project{ margin:0 } .project > img { width:100% } .project-hover { bottom: 35px; left: 0; padding: 0 45px; position: absolute; width: 100%; } .project-hover > h4 { color: #fff; float: left; font-size: 19px; margin: 0 0 5px; width: 100%; opacity:0; -webkit-transform:translateY(100px); -moz-transform:translateY(100px); -ms-transform:translateY(100px); -o-transform:translateY(100px); transform:translateY(100px);  -webkit-transition: all 600ms cubic-bezier(0.770, 0.000, 0.175, 1.000); -moz-transition: all 600ms cubic-bezier(0.770, 0.000, 0.175, 1.000); -o-transition: all 600ms cubic-bezier(0.770, 0.000, 0.175, 1.000); transition: all 600ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */  -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */ } .project-hover > span { color: #bebebe; float: left; font-family: lato; font-size: 13px; font-style: italic; letter-spacing: 1.5px; line-height: 13px; margin-top: -4px; width: 100%; opacity:0; -webkit-transform:translateY(100px); -moz-transform:translateY(100px); -ms-transform:translateY(100px); -o-transform:translateY(100px); transform:translateY(100px); -webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */  -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */ } .project:hover .project-hover > h4, .project:hover .project-hover > span{ -webkit-transform:translateY(0); -moz-transform:translateY(0); -ms-transform:translateY(0); -o-transform:translateY(0); transform:translateY(0); opacity:1; } .project:before{ background: #292929 none repeat scroll 0 0; content: ""; height:0; width: 100%; opacity:0; position: absolute; left: 0; bottom: 0; -webkit-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); -moz-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); -o-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */  -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */ } .project:hover:before{ height:100%; opacity:0.64; } .project-hover a { border: 2px solid #b4b4b4; color: #efefef; display: inline-block; font-size: 17px; height: 45px; line-height: 45px; margin-right: 5px; margin-top: 15px; text-align: center; width: 45px; -webkit-transform:scale(0); -moz-transform:scale(0); -ms-transform:scale(0); -o-transform:scale(0); transform:scale(0); -webkit-transition: all 900ms cubic-bezier(0.770, 0.000, 0.175, 1.000); -moz-transition: all 900ms cubic-bezier(0.770, 0.000, 0.175, 1.000); -o-transition: all 900ms cubic-bezier(0.770, 0.000, 0.175, 1.000); transition: all 900ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */  -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */ } .project .lightbox { display:inline-block } .project:hover .project-hover a{ -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1); } .project.light::before { background:#fff; opacity:0.8; } .project.light .project-hover > h4 { color:#2e2e2e } .project.light .project-hover > span { color:#2e2e2e } .project.light a { border-color: #838383; color: #2e2e2e; } .project.light a:hover{ color:#FFFFFF; border-color:#FFFFFF; } .project.style2 .project-hover { bottom: auto; text-align: center; top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); } .project-name { float: left; margin-bottom: 30px; margin-top: -20px; padding-left: 20px; width: 100%; } .project-name h5 { color: #474747; float: left; font-family: 'Poppins'; font-size: 14px; font-weight: 600; margin: 0 0 5px; text-transform: uppercase; width: 100%; } .project-name h5 a{ color:inherit } .project-name > i { color: #313131; float: left; font-size: 11px; width: 100%; }  .loadmore { float: left; margin-top: 30px; text-align: center; width: 100%; } .loadmore > a { color: #fff; display: inline-block; font-size: 13px; font-weight: 600; padding: 11px 35px; } /*=============== Agency Details ===================*/ .side-title.center { margin-bottom: 50px; text-align: center; } .creative-box-style { float: left; margin-bottom: -30px; width: 100%; background: repeat-x url(../images/resource/frozen.png); background-position: 100% 0; } .detail-box { background: #f9f9f9 none repeat scroll 0 0; float: left; margin-bottom: 30px; padding: 50px 30px; text-align: center; width: 100%; }  .detail-box.vision-box { background: #d7f4ff none repeat scroll 0 0; } .detail-box > h4 { color: #282828; float: left; font-size: 20px; margin: 0 0 10px; width: 100%; } .detail-box.mission-box, .detail-box.vision-box{ border-radius: 75px 15px; } .detail-box.mission-box > h4, .detail-box.vision-box > h4 { color: #282828; float: left; margin: 0 0 10px; width: 100%; font-size: max(2.25rem,min(calc(15.83886px + 1.57978vw),32px)); line-height: 1.2; text-align: center; } .detail-box.mission-box > h4 { color: #fff; } .detail-box.vision-box > h4 { color: #000; } .detail-box > p { float: left; font-size: 13px; letter-spacing: 0.7px; margin: 0 0 10px; width: 100%; } .detail-box > a { color: #282828; display: inline-block;  font-size: 11px; } form.subscribe input{ background: #2a2a2a none repeat scroll 0 0; float: left; height: 60px; margin: 16px 0; position: relative; width: 100%; } form.subscribe input { border: 0 none; color: #c1c1c1; float: left; font-size: 13px; height: 100%; padding: 15px 60px 15px 20px; width: 100%; } form.subscribe button { margin: 16px 0; font-size: 20px; line-height: 10px; padding: 15px 60px 15px 20px; width: 100%; color:#fff; background-color:var(--tertiarycolor); text-decoration:none } .op-0{ opacity: 0; } .op-100{ opacity: 100%; } /*=============== About Section ===================*/ .about-sec { display: table; width: 100%; } .about-img { display: table-cell; text-align: center; vertical-align: middle; position:relative; width: 50%; } .about-detail .images-carousel.owl-carousel.owl-loaded{ display : grid; } .about-detail { display: table-cell; padding: 60px; vertical-align: middle; width: 50%; } .case-studies-news-gallery.about-detail{ padding : 10px; } .bg-dark-grey .about-detail{ background: var(--darkgrey); } .bg-dark-grey h3{ color: #fff; } .bg-lightest-blue{ background: var(--lightestblue); } .about-detail .progressbars { margin-bottom: 0; margin-top: 20px; } .about-img > img { width:100% } .about-sec.dark .about-img > img{ width:auto; } .about-detail span { color: #fff; float: left; margin-bottom: 5px; text-transform: uppercase; width: 100%; } .about-detail h4 { float: left; margin: 0 0 20px; width: 100%; } .bg-dark-grey .about-detail h4 { color : #fff; } .about-detail p { font-size: 18px; letter-spacing: 0; line-height: 30px; margin-bottom: 20px; color: #b7b7b7; float: left; margin-bottom: 20px; width: 100%; } .bg-dark-grey .about-detail > p{ color: #b7b7b7; } .bg-dark-grey .about-detail > p, .bg-dark-grey  ul>li{ color: #fff; } .bg-white .about-detail > p, .bg-white .about-detail > h4 { color: #000; } .about-service { float: left; margin-bottom: -20px; width: 100%; } .coloured-btn{ background: linear-gradient(to right, rgb(40,147,206), rgba(255,0,0,0) 100%), linear-gradient(to right, rgb(40,147,206), rgba(0,255,0,0) 100%), linear-gradient(to right, rgb(3,34,172), rgb(0,0,255) 100%); background:-webkit-linear-gradient(90deg, rgb(55 114 213), rgb(31, 137, 201) 100%), -webkit-linear-gradient(100deg, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), -webkit-linear-gradient(260deg, rgb(40, 147, 206), rgb(0, 0, 206) 100%); background: -moz-linear-gradient(90deg, rgb(55 114 213), rgb(31, 137, 201) 100%), -moz-linear-gradient(100deg, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), -moz-linear-gradient(260deg, rgb(40, 147, 206), rgb(0,0,206) 100%); background: -o-linear-gradient(90deg, rgb(55 114 213), rgb(31, 137, 201) 100%), -o-linear-gradient(100deg, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), -o-linear-gradient(260deg, rgb(40, 147, 206), rgb(0,0,206) 100%); background: -ms-linear-gradient(90deg, rgb(55 114 213), rgb(31, 137, 201) 100%), -ms-linear-gradient(100deg, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), -ms-linear-gradient(260deg, rgb(40, 147, 206), rgb(0,0,206) 100%); border: 1px solid #fff; color: white; border-radius: 2rem 0.9rem; transition: background-color 300ms ease; height: 45px; display: inline-block; padding: 0 48px; color: #fff; text-transform: uppercase; font-size: 14px; font-weight: 600; letter-spacing: 1px; line-height: 45px; margin: 20px 0; } .abt-project-overlay .coloured-btn{ background: #bce7f8; color: white; border-radius: 2rem 0.9rem; transition: background-color 300ms ease; height: 50px; display: inline-block; padding: 0 48px; color: #344b69; text-transform: uppercase; font-size: 14px; font-weight: 500; letter-spacing: 1px; line-height: 48px; margin: 20px 0; border:0; } .abt-project-overlay .coloured-btn:hover { color: var(--primaryblue); } .transparent-btn{ background-color: transparent; border: 1px solid #fff; box-shadow: none; color: #ffffff; text-align: left; float: left; border: 2px solid rgba(255,255,255,0.50); color: white; border-radius: 2rem 0.9rem; transition: background-color 300ms ease; height: 50px; display: inline-block; padding: 0 48px; text-transform: uppercase; font-size: 14px; font-weight: 600; letter-spacing: 1px; line-height: 45px; margin: 20px 0; } @media(max-width : 1199px){ .transparent-btn, #mega-menu-wrap-menu-1 #mega-menu-menu-1>li.mega-menu-item:last-child>a.mega-menu-link{ margin:20px 0; line-height:36px; padding : 0 30px; font-size : 12px; height: 40px; } } .transparent-blue-btn{ background-color: transparent; border: 1px solid var(--secondaryblue); border-radius: 10px; box-shadow: none; transition: background-color 300ms ease; color: var(--secondaryblue); text-align: left; float: left; padding : 5px 20px; font-weight: 600; } .blackish .coloured-btn{ box-shadow: 0 6px 10px rgb(55, 55, 55); } .coloured-btn i { margin-right:5px } .coloured-btn:hover{ color:#fff; opacity : 0.9; } .about-sec.dark .about-detail > h4 { color:#515050 } .about-sec.dark .about-detail > p { color:#1b92d0 } .about-sec.dark .service-name > strong { color: #515050 } .about-sec h5 { color: #fff; float: left; font-size: 33px; font-weight: 600; letter-spacing: 1px; margin: 0 0 20px; text-transform: uppercase; width: 100%; } .about-slide > p { color: #c0c0c0; float: left; font-size: 15px; line-height: 24px; margin-bottom: 20px; width: 100%; } .about-slide .small-btn { padding:10px 20px } /*=============== Contact Details ===================*/ .contact { display: table; width: 100%; } .contact-information{ background: #d7f4ff; padding: 5rem 4rem; width: 100%; height: 100%; position: relative; } .contact-img { display: table-cell; vertical-align: middle; width: 50%; } .add_{ margin-top: 4rem; } .contact-img > img{ width:100% } .contact-detail { background: #f5f5f5 none repeat scroll 0 0; border: 10px solid #e9e7e7; display: table-cell; padding:40px 60px; vertical-align: middle; width: 50%; } .contact-detail form { float: left; width: 100%; } .field{ background: #fafafa none repeat scroll 0 0; display: table; margin-bottom: 10px; width: 100%; padding:0 20px; } .field i { display: table-cell; font-size: 16px; line-height: 50px; text-align: center; vertical-align: top; width: 40px; } .field input, .field textarea{ background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: 0 none; display: table-cell; font-family: 'Poppins'; font-size: 14px; height: 50px; letter-spacing: 1px; padding: 10px 0 10px 0; vertical-align: middle; width: 100%; } .field textarea { height: auto; max-width: 100%; min-height: 150px; } .style2 .field { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: 3px solid #efefef; margin-bottom: 20px; } .text2 { float: left; width: 100%; } /*=============== Testimonials Carousel ===================*/ .testimonials-carousel { float: left; width: 100%; } .testimonials-thumbs { float: left; margin:0 10% 30px; width:80%; } .thumb { float: left; text-align: center; width: 100%; } .thumb > img { display:inline-block!important; } .thumb.slick-slide.slick-current.slick-active.slick-center { margin-top: 20px; } .testimonial-messages { float: left; width: 100%; } .message { float: left; width: 100%; font-size: 2rem; text-align: left; padding-bottom: 2rem; } .message blockquote { border: 0 none; color: #000; font-family: 'Poppins'; font-size: 17px; font-style: italic; line-height: 30px; margin: 0 0 30px; padding: 0 40px; text-align: center; } .message span { color: #fff; display: inline-block; font-family: 'Poppins'; font-size: 18px; font-style: italic; font-weight: 600; } .loader{ width:30px; } #submit{ font-size: 1.5rem; line-height: 2rem; border: 3px solid #fff; color: #fff; } .slick-arrow { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; color: transparent; height: 44px; position: absolute; right: -110px; top: 70px; width: 44px; } .slick-arrow::before { color: rgba(0,0,0,0.5); content: "\f105"; font-family: fontawesome; font-size: 20px; height: 100%; left: 0; line-height: 40px; position: absolute; top: 0; width: 100%; } .slick-arrow:hover:before{ color:var(--primaryblue); } .slick-arrow.slick-prev:before { content:"\f104" }  /*=============== Dark Form ===================*/ form.dark .field { background: rgba(251, 251, 251, 0.19) none repeat scroll 0 0; border: 1px solid #4e4e4e; margin-bottom: 20px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; } form.dark .field i, form.dark .field input, form.dark .field textarea { color:#ffffff } form.center-btn{ text-align:center; } #contactForm label{ font-size: 18px; } .news-post { float: left; text-align: left; margin-bottom: 30px; width: 100%; } .news-post-img { float: left; margin-bottom: 15px; width: 100%; } .news-post-img > img { width: 100%; } .news-post-detail { float: left; width: 100%; } .news-post-detail h3 { color: #313131; float: left; font-size: 18px; font-weight:500; margin: 0 0 8px; width: 100%; } .news-post-detail h3 a{ color: inherit } .news-post-detail ul { float: left; list-style: outside none none; margin: 0 0 10px; padding: 0; width: 100%; } .news-post-detail ul li { color: #6b6b6b; float: left; font-size: 12px; font-weight:600; margin-right: 10px; padding-right: 20px; position: relative; } .news-post-detail ul li a{ color:inherit; } .news-post-detail ul li::before { content: "X"; font-size: 8px; position: absolute; right: 0; top: 3px; } .news-post-detail ul li:last-child::before { display: none; } .news-post-detail ul li:last-child { margin: 0; padding: 0; } .news-post-detail > p { float: left; font-size: 15px; font-weight: 400; line-height: 26px; margin: 0; width: 100%; }  .light .news-post-detail h3{ color:#fff } .light .news-post-detail p{ color:#b1b1b1 } /*=============== About Project ===================*/ .about-projects { float: left; width: 100%; } .about-project-detail { float: left; position: relative; width: 40%; } .about-project-detail.comparisonText{ float: left; position: relative; width: 100%; } .about-project-detail > img{ width:100% } .abt-project-overlay { height: 100%; width: 100%; text-align: center; position: absolute; left: 0; top: 0; } .abt-project-overlay::before { content: ""; display: inline-block; height: 100%; vertical-align: middle; } .abt-project-inner { display: inline-block; vertical-align: middle; width: 90%; } .abt-project-inner > span { color: #fff; float: left; font-family: lato; font-size: 16px; font-style: italic; letter-spacing: 2px; margin-bottom: 10px; width: 100%; } .abt-project-inner > h3 { float: left; font-size: 30px; font-weight: 300; color: var(--black); line-height: 37px; margin: 0 0 20px; width: 100%; } .abt-project-inner > p { float: left; width: 100%; } .about-project-carousel { float: left; width: 60%; } .about-project-carousel.owl-nav{ opacity:1 } .about-project-carousel { float: left; width: 60%; } .about-project-carousel.owl-carousel .owl-controls .owl-nav div{ width: 50px; height : 50px; line-height: 1; vertical-align: middle; } .owl-controls{ margin-bottom : 25px; }  @media(max-width : 1200px){ .about-project-detail > img{ display: none; } .about-project-detail > img{ display: none; } .abt-project-overlay{ position: relative; width: 100%; } .about-project-detail, .about-project-carousel{ width: 100%; } .abt-project-inner { display: inline-block; vertical-align: middle; width: 100%; } .et-slide{ display: block; } } @media(min-width : 1400px){  .about-project-carousel .owl-nav{ top:25px; height: 0; left: -25px; padding: 0; position: absolute; width: 54px; } .about-project-carousel .owl-nav .owl-prev{ border-top-left-radius: 20px; } .about-project-carousel .owl-nav .owl-next{ border-bottom-right-radius: 20px; } } .about-project-carousel .owl-nav > div{ margin-top : 0; -webkit-border-radius:0%; -moz-border-radius: 0%; -ms-border-radius: 0%; -o-border-radius: 0%; border-radius: 0%; background: var(--secondaryblue); border :0px solid #fff; } .about-project-carousel .owl-nav > div:hover{ background: #176ab3; } .about-project-carousel .owl-nav > div:before{ color : #fff; } .portfolio { float: left; position: relative; overflow:hidden; width: 100%; z-index: 1; } .portfolio > img { width: 100%; z-index: -1; } .portfolio:hover > img { -ms-transform:scale(1.15); -o-transform:scale(1.15); transform:scale(1.15); -webkit-transition:-webkit-transform 0.2s linear, -webkit-filter 0.2s ease 0.2s; -moz-transition:-moz-transform 0.2s linear, -moz-filter 0.2s ease 0.2s; -ms-transition:-ms-transform 0.2s linear, -ms-filter 0.2s ease 0.2s; -o-transition:-o-transform 0.2s linear, -o-filter 0.2s ease 0.2s; transition:transform 0.2s linear, -webkit-filter 0.2s ease 0.2s; } .portfolio:after{ left: auto; right: 0; } .project-slide .portfolio:before{ content: ""; width:100%; height: 100%; background : linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgb(0,0,0,0.50) 100%); position: absolute; z-index: 1; } .portfolio-hover { left: 50%; padding: 10px 8px; z-index: 2; position: absolute; text-align: center; bottom: 10px; width: 90%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateX(-50%); border-radius: var(--themedbordersmall); }  .portfolio-hover a{ color: #fff; font-size: 16px; line-height: 20px; letter-spacing: 0; text-align: left; transition: 0.35s; } .portfolio-hover a:hover{ color: var(--tertiarycolor); text-decoration: underline; } .portfolio-hover > a { color: #fff; display: inline-block; } .portfolio .portfolio-hover > span, .portfolio .portfolio-hover > a{ opacity:1; -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1); } .portfolio:hover .portfolio-hover > a { transform: translateY(-10px); } .owl-nav > div { color: transparent; float: left; position: relative; width: 40px; height: 40px; } .owl-nav > div:before{ color: var(--tertiarycolor); content: "\f104"; font-family: fontawesome; font-size: 23px; height: 40px; left: 0; line-height: 40px; position: absolute; text-align: center; top: 0; width: 40px; } .owl-nav > div.owl-next:before{ content:"\f105" } .owl-nav > div:hover:before{ color:#fff } .owl-nav{ position: absolute; top: -70px; right: 0; left: calc(100% - 150px); width: 150px; } .owl-nav *:hover{ background: var(--tertiarycolor); } /*=============== Member Intro ===================*/ .member-intro { display: table; width: 100%; } .member-img { display: table-cell; vertical-align: middle; } .member-detail { display: table-cell; padding: 0 20px; text-align: center; vertical-align: middle; } .member-detail > span { color: #4a4a4a; float: left; font-family: lato; font-size: 14px; font-style: italic; letter-spacing: 1px; margin-bottom: 5px; width: 100%; } .member-detail > h3 { float: left; font-size: 37px; font-weight: 600; margin: 0 0 20px; text-transform: uppercase; width: 100%; } .member-detail .member-social { margin-bottom: 30px; } .member-detail > p { color: #424242; float: left; font-size: 16px; letter-spacing: 1px; margin-bottom: 30px; width: 100%; } .member-detail .skill .progress { background:#ededed; border:0 none; height:4px; } .member-detail .skill .progress .progress-bar { left:0; -webkit-transform:translateX(0); -moz-transform:translateX(0); -ms-transform:translateX(0); -o-transform:translateX(0); transform:translateX(0); } .member-detail .skill > i{ color: #4a4a4a; float: left; font-family: lato; font-size: 13px; margin-bottom: 10px; } .member-detail .skill > strong { float: right; font-family: 'Poppins'; font-size: 16px; font-weight: 800; letter-spacing: 1px; margin-bottom: 10px; } .member-detail .skill { margin: 0 20% 30px; width: 60%; } /*=============== Images Carousel ===================*/ .images-carousel{ float:left; width:100%; } .picture{ float: left; width: auto; margin: 10px; } .picture img{ width:100% } .images-carousel:hover img { -webkit-filter:grayscale(1) blur(2px); filter:grayscale(1) blur(2px); } .images-carousel:hover .picture:hover img { -webkit-filter:grayscale(0); filter:grayscale(0); }  /*=============== Creative Tabs ===================*/ .creative-tabs { float: left; position: relative; width: 100%; } .creative-tabs .tab-content#myTabContent { float: left; width: 100%; } #myTabContent .creative-tab-content  { float: left; position: relative; width: 100%; } .creative-tab-content > img{ width:100% } #myTabContent .creative-tab-content .point { cursor: pointer; position: absolute; width: 1.6rem; height: 1.6rem; background-color: #f7bb3c; border-radius: 50%; opacity: 0; visibility: hidden; transition: visibility 0s, opacity 0.25s ease-in-out; will-change: transform, box-shadow; /*transform: translate(-50%, -50%);*/ box-shadow: 0 0 0 rgba(255,173,0,0.50); animation: pulse 2s infinite; } #myTabContent .tab-pane.active .point { visibility: visible; opacity: 1; } #myTabContent .point.pointer-engineering { bottom: calc(150px + 25%); left: calc(60%); } #myTabContent .point.pointer-prefabrication { bottom: calc(150px + 25%); left: calc(60%); } #myTabContent .point.pointer-installation { bottom: calc(150px + 25%); left: calc(60%); }  @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); } 70% { box-shadow: 0 0 0 25px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }  #myTabContent .tab-pane.active .creative-detail{ opacity: 1; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } .creative-detail { position: absolute; right: 0; bottom: 0; width: 60%; min-height: 135px; padding: 2rem 8rem; background: rgb(247,187,60); opacity:0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition:all 1s ease 0.6s; -moz-transition:all 1s ease 0.6s; -ms-transition:all 1s ease 0.6s; -o-transition:all 1s ease 0.6s; transition:all 1s ease 0.6s; } .path-vert { stroke-dasharray: 1000; /*   stroke-dashoffset: 800; */ animation: draw1 1.25s linear alternate; } svg#line_2 { position: absolute; height: calc(152.5px + 25%); left: calc(60% - 22.25px); bottom: 0; } .creative-detail > h4{ color: #fff; float: left; font-size: 2em; font-weight: 700; margin: 0 0 0.525em; width: 100%; } .creative-detail > h4 i{ font-style:normal; color: #414141 !important; } .creative-detail > span { color: #fffefe; float: left; font-family: 'Poppins'; font-size: 20px; font-style: italic; font-weight: 400; letter-spacing: 1px; margin-bottom: 15px; width: 100%; } .creative-detail > span i{ color: #414141 !important; } .creative-detail > p { color:#d3d3d3; float: left; font-size: 16px; margin-bottom: 15px; width: 100%; } .creative-detail .button-set > a {  font-weight: 300; } .creative-tabs .nav { border: 0 none; position:absolute; top:50%; left:5%; width:115px; z-index:1; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); } .creative-tabs .nav li { margin:0 0 20px } .creative-tabs .nav li a, .creative-tabs .nav li.active a{ background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: 5px solid #ffffff; overflow: hidden; padding: 0; position: relative; -webkit-border-radius: 0%; -moz-border-radius: 0%; -ms-border-radius: 0%; -o-border-radius: 0%; border-radius: 0%; cursor: pointer; } .creative-tabs .nav li:last-child { margin:0 } .creative-tabs .nav li a:before{ background: white none repeat scroll 0 0; content: ""; height: 100%; left: 0; opacity: 0.3; position: absolute; top: 0; width: 100%; -webkit-transform:scale(0); -moz-transform:scale(0); -ms-transform:scale(0); -o-transform:scale(0); transform:scale(0); } .creative-tabs .nav li.active a:before { -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1); } /*=============== About Section ===================*/ .about-section { float: left; padding: 0 30px; text-align: center; width: 100%; } .about-section > a { display: inline-block; margin-bottom: 20px; } .about-section > p { color: #acacac; float: left; font-size: 14px; line-height: 26px; margin-bottom: 30px; width: 100%; } .social-share { float:left; width:100%; } .social-share > a { background: #3c3b3b; color: #fff; display: inline-block; font-size: 20px; height: 40px; line-height: 40px; margin: 0 3px; width: 40px; text-align: center; }  .about-section > ul { float: left; list-style: outside none none; margin-bottom: 0; margin-top: 40px; padding: 0; width: 100%; } .about-section > ul li { color: #dddddd; display: inline; font-size: 13px; margin: 0 15px; } .about-section > ul li i { font-size: 15px; margin-right: 10px; } .big-carousel.owl-carousel { float:left; width:100%; margin-top: 0; } .big-carousel .title p{ display:block; font-size:3.5rem; font-weight:700; text-transform:uppercase; line-height:3.125rem; } @media only screen and (min-width: 62rem){ .big-carousel .title p{ font-size: 4.75rem; line-height: 3.938rem; } } .big-carousel .title p:nth-child(1){ color:#fff; } .big-carousel .title p:nth-child(2){ color:#fff; } .big-carousel .title p:nth-child(3){ color:#fff; } .big-carousel .big-image-name .coloured-btn{ box-shadow: none; border: none; background: linear-gradient(to right, rgb(40,147,206), rgba(255,0,0,0) 100%), linear-gradient(to right, rgb(40,147,206), rgba(0,255,0,0) 100%), linear-gradient(to right, rgb(3,34,172), rgb(0,0,255) 100%); background:-webkit-linear-gradient(90deg, rgb(55 114 213), rgb(31, 137, 201) 100%), -webkit-linear-gradient(100deg, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), -webkit-linear-gradient(260deg, rgb(40, 147, 206), rgb(0,0,206) 100%); background: -moz-linear-gradient(90deg, rgb(55 114 213), rgb(31, 137, 201) 100%), -moz-linear-gradient(100deg, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), -moz-linear-gradient(260deg, rgb(40, 147, 206), rgb(0,0,206) 100%); background: -o-linear-gradient(90deg, rgb(55 114 213), rgb(31, 137, 201) 100%), -o-linear-gradient(100deg, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), -o-linear-gradient(260deg, rgb(40, 147, 206), rgb(0,0,206) 100%); background: -ms-linear-gradient(90deg, rgb(55 114 213), rgb(31, 137, 201) 100%), -ms-linear-gradient(100deg, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), -ms-linear-gradient(260deg, rgb(40, 147, 206), rgb(0,0,206) 100%); } .big-carousel .big-image-name .coloured-btn:hover{ background: var(--tertiarycolor); color:#fff; } .big-image{ float:left; width:100%; position:relative; }.big-carousel .owl-stage-outer{ border-bottom-right-radius: 100px; overflow: hidden; } .big-image img { width:100% } .big-image-name { padding: 35px 40px; position: absolute; left: 20px; bottom: 75px; text-align: left; webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: -webkit-backdrop-filter 0.9s; transition: backdrop-filter 0.9s; transition: backdrop-filter 0.9s, -webkit-backdrop-filter 0.9s; z-index: 3; -webkit-transform:translateY(-20%); -moz-transform:translateY(-20%); -ms-transform:translateY(-20%); -o-transform:translateY(-20%); transform:translateY(-20%); } .header-banner .big-image:before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ''; background: rgba(24, 34, 36, 0.30); z-index: 2; } /*=============== Logos Carousel ===================*/ .logos-carousel{ float:left; width:100%; padding:0 50px; } .logo{ float:left; width:100%; } .logo a{ float:left; width:100%; text-align:center; } .logo a img{ max-width:100% } .logos-carousel .owl-nav > div{ background: #efefef none repeat scroll 0 0; border: 0 none; border-radius: 0; height: 40px; margin-left: -30px; width: 40px; } .logos-carousel .owl-nav > div:before{ line-height:40px } .logos-carousel .owl-nav > div.owl-next { margin-right:-40px } /*=============== Timeline Carousel ===================*/ .timeline-carousel{ float:left; width:100%; } timeline .slot{ float:left; width:100%; } timeline .slot a{ float:left; width:100%; text-align:center; } timeline .slot a img{ max-width:100% } .blog-carousel .owl-nav > div, .timeline-carousel .owl-nav > div{ border: 0 none; border-radius: 0; height: 40px; width: 40px; } /*=============== Work Light  ===================*/ .center-title.light h2, .center-title.light span, .center-title.light h2:before{ color:#fff } .center-title.light:before, .center-title.light:after{ background:#4c5355 } .work.light:before { background:#fff } .work.light .work-hover > h4 { color:#212121 } .work.light .work-hover > a { color:#fff } .options { float: left; text-align: center; width: 100%; margin-bottom: 30px; } .option-combo { float: left; width: 100%; } .option-set { list-style: outside none none; margin: 0; padding: 0; } .option-set li { color: #fff; display: inline-block;  font-size: 13px; margin: 0 5px; text-transform: uppercase; } .option-set li a { color: inherit; float: left; padding: 10px 15px; position: relative; z-index: 1; } .option-set li a:before, .option-set li a:after { border-bottom: 1px solid #605f5d; border-top: 1px solid #605f5d; content: ""; height: 100%; width: 0; z-index: -1; position: absolute; left: 50%; top: 0; } .option-set li a:after { border-bottom:0 none; border-top:0 none; border-left: 1px solid #605f5d; border-right: 1px solid #605f5d; height: 0; left: 0; top: 50%; width: 100%; } .option-set li a.selected:after{ height: 100%; top: 0; } .option-set li a.selected:before{ left: 0; width: 100%; } .style2 .option-set li a { border: 0 none; color: #636363; font-family: 'Poppins'; font-size: 13px; font-weight: 400; letter-spacing: 2px; padding: 0 10px; text-transform: capitalize; } .style2 .option-set li a:before, .style2 .option-set li a:after { display:none } .style2 .option-set li a i { font-size: 8px; font-style: normal; margin-left: 4px; vertical-align: top; } .style2 .option-set li { position:relative } .light .option-set li{ color:#373737 } .light .option-set li a:before, .light .option-set li a:after{ border-width:2px }  /*=============== Tabs Carousel ===================*/ .tabs-carousel { float: left; width: 100%; } .tabs-selectors { float: left; width: 100%; } .tab-thumb { border:0!important; float:left; margin-bottom:20px; width:100%; } .tabs-selectors .slick-arrow { background: #fff none repeat scroll 0 0; border: 0 none; height: 33px; left: 50%; margin-left: -16.5px; top: -50px; width: 33px; } .tabs-selectors .slick-arrow.slick-next { bottom: -30px; top: auto; } .tabs-selectors .slick-arrow:before { content:"\f106"; font-size: 14px; line-height: 33px; } .tabs-selectors .slick-arrow:hover:before{ color:#FFFFFF } .tabs-selectors .slick-arrow.slick-next::before { content:"\f107"; } .tabs-content { float: left; width: 100%; } .tabs-content.overlap { margin-top:-230px } .tab-details { display: table; float: left; width: 100%; } .tab-mockup { display: table-cell; vertical-align: bottom; } .tab-description { display: table-cell; padding-left: 55px; vertical-align: bottom; padding-bottom: 50px; } .tab-description > span {  color: #fff; float: left; font-family: lato; font-style: italic; letter-spacing: 1.5px; margin-bottom: 5px; width: 100%; } .tab-description h4 { color: #fff; float: left; font-size: 30px; font-weight: 600; margin: 0 0 10px; text-transform: uppercase; width: 100%; } .tab-description > p { color: #b1afaf; float: left; font-size: 15px; letter-spacing: 1px; margin-bottom: 20px; width: 100%; }  ul.bulletpoints, .tab-description > ul { float: left; list-style: outside none none; margin: 0 0 20px; padding: 0; width: 100%; } ul.bulletpoints.blue li:before{ background: var(--primaryblue); border-radius: 50%; } .tab-description li { color: #f1f1f1; float: left; font-family: 'Poppins'; letter-spacing:0.5px; font-size: 15px; line-height: 25px; margin-bottom: 15px; padding-left: 40px; position: relative; width: 100%; } ul.bulletpoints li{ float: left; font-size: 18px; letter-spacing: 0; line-height: 30px; text-align: left; font-family: 'Poppins'; margin-bottom: 15px; padding-left: 40px; position: relative; width: 100%; } .mission-box ul.bulletpoints li{ color: #fff; } .vision-box ul.bulletpoints li{ color: #000; } .tab-description li:before{ background: #2f2f2f none repeat scroll 0 0; content: "\f105"; font-family: fontawesome; font-size: 12px; height: 20px; left: 0; line-height: 20px; position: absolute; text-align: center; top: 4px; width: 20px; } ul.bulletpoints li:before{ content: "\f105"; font-family: fontawesome; font-size: 12px; height: 20px; left: 0; line-height: 20px; position: absolute; text-align: center; top: 4px; width: 20px; background: var(--primaryblue); border-radius: 50%; color:#fff; } .mission-box ul.bulletpoints li:before{ background: #0e5691 none repeat scroll 0 0; } .vision-box ul.bulletpoints li:before{ background: #8ecee7 none repeat scroll 0 0; } ul.bulletpoints li:last-child, .tab-description li:last-child{ margin:0 } /*=============== Simple News ===================*/b .simple-news-section { float:left; margin-bottom:-30px; width:100%; } .simple-news { float: left; margin-bottom: 30px; width: 100%; } .simple-news-img { margin-bottom: 70px; position: relative; width: 100%; } .simple-news-img img { width:100% } .news-author { border: 4px solid #fff; bottom: -50px; left: 30px; overflow: hidden; position: absolute; } .simple-news-detail { float: left; padding-left: 30px; width: 100%; } .simple-news-detail > h4 { color: #313131; float: left; font-size: 20px; font-weight: 700; letter-spacing: 0.3px; margin: 0 0 10px; text-transform: uppercase; width: 100%; } .simple-news-detail > h4 a { color:inherit } .meta { float: left; list-style: outside none none; margin: 0 0 10px; padding: 0; width: 100%; } .meta > li { color: #969595; display: inline-block; font-size: 11px; margin-right: 10px; } .meta > li a{ color:inherit } .simple-news-detail > p { color: #424242; float: left; font-size: 14px; line-height: 28px; margin-bottom: 30px; width: 100%; } .short-links{ float:left } .short-links > a, .short-links > span{ background: #f5f5f5 none repeat scroll 0 0; color: #a3a2a2; float: left; font-size: 10px; margin-right: 5px; padding: 4px 13px; position:relative; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; } .short-links a i, .short-links span i{ color: #dadada; font-size: 9px; line-height: 16px; margin-right: 3px; } .short-links > a:hover, .short-links > a:hover i, .short-links > span:hover, .short-links > span:hover i{ color:#FFFFFF } a.facebook{ background:#384f84 } a.facebook-color{ color:#384f84 } a.twitter{ background:#4d9fd7 } a.twitter-color{ color:#4d9fd7 } a.google-plus{ background:#cf4332 } a.google-plus-color{ color:#cf4332 } a.dribbble{ background:#d75281 } a.dribbble-color{ color:#d75281 } a.linkedin{ background:#0077b5 } a.linkedin-color{ color:#0077b5 } a.rss{ background:#fd9f13 } a.rss-color{ color:#fd9f13 } a.linkedin{ background:#0077b5 } a.linkedin-color{ color:#0077b5 } a.github{ background:#1f76b6 } a.github-color{ color:#1f76b6 } a.vimeo{ background:#44bbff } a.vimeo-color{ color:#44bbff } a.pinterest{ background:#d64033 } a.pinterest-color{ color:#d64033 } .share-link { background: #fff none repeat scroll 0 0; padding-right: 10px; position: absolute; right: 100%; top: 0; visibility: hidden; width: 140px; } .share-link a { color: #ffffff; float: right; font-size: 10px; height: 25px; line-height: 25px; margin-left: 6px; opacity: 0.9; text-align: center; transform: scale(0); width: 25px; -webkit-transform:scale(0); -moz-transform:scale(0); -ms-transform:scale(0); -o-transform:scale(0); transform:scale(0); } .short-links > span:hover .share-link{ visibility:visible } .short-links > span:hover .share-link a{ -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1); } .share-link a:hover{ opacity:1 } .more { color: #fff; float: right; font-size: 10px; padding: 5px 15px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; } .more:hover{ color:#FFFFFF } .style2 .simple-news { margin:0 } .simple-news-section.style2 .row { border-bottom: 1px solid #dbdbdb; margin-bottom: 70px; padding-bottom: 70px; } .simple-news-section.style2 { margin-bottom: -70px; overflow: hidden; } .simple-news-section.style2 .row:last-child { border: 0 none; padding: 0; }  /*=============== Team Intro Carousel ===================*/ .team-intro { display: table; overflow: hidden; position: relative; width: 100%; z-index: 1; -webkit-border-radius:30px; -moz-border-radius:30px; -ms-border-radius:30px; -o-border-radius:30px; border-radius:30px; } .team-intro-img { display: table-cell; position: relative; vertical-align: middle; } .team-intro-social { position: absolute; left: 20px; top: 50%; width: 36px; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); } .team-intro-social a { background: white none repeat scroll 0 0; color: #000000; float: left; height: 36px; line-height: 36px; margin-bottom: 10px; text-align: center; width: 36px; } .team-intro-social a:hover{ color:#ffffff } .team-intro-social a:last-child { margin:0 } .team-intro-detail { border: 2px solid #4e4e4d; display: table-cell; padding: 30px 50px; vertical-align: middle; -webkit-border-radius: 0 30px 30px 0; -moz-border-radius: 0 30px 30px 0; -ms-border-radius: 0 30px 30px 0; -o-border-radius: 0 30px 30px 0; border-radius: 0 30px 30px 0; } .team-intro-detail > h5 { color: #fff; float: left; font-size: 42px; font-weight: 600; margin: 0 0 5px; text-transform: uppercase; width: 100%; } .team-intro-detail > span { color: #fff; float: left;  font-size: 13px; letter-spacing: 2px; margin-bottom: 20px; text-transform: uppercase; width: 100%; } .team-intro-detail > p { color: #dbdbdb; float: left; font-family: 'Poppins'; font-size: 15px; letter-spacing: 0.9px; margin-bottom: 20px; width: 100%; } .team-intro-detail .skill > strong { color: #fff; float: left; font-family: 'Poppins'; font-size: 11px; margin-bottom: 10px; } .team-intro-detail .skill > .progress { background: #fff none repeat scroll 0 0; border: 0 none; height: 5px; } .team-intro-detail .skill > .progress .progress-bar { left: 0; -webkit-transform:translateX(0); -moz-transform:translateX(0); -ms-transform:translateX(0); -o-transform:translateX(0); transform:translateX(0); } .team-intro-carousel .owl-nav { padding:0 } .team-intro-carousel .owl-nav > div { margin-left:-80px } .team-intro-carousel .owl-nav > div.owl-next { margin-left: 0; margin-right: -80px; } .team-intro-carousel .owl-nav > div::before { color: #fff; content: "\f177"; } .team-intro-carousel .owl-nav > div.owl-next:before { content:"\f178" }  /*=============== Creative Team ===================*/ .creative-team { float: left; width: 100%; margin-bottom:-50px; } .creative-member { float: left; width: 100%; margin-bottom:50px; } .creative-member-img { float: left; margin-bottom:40px; position: relative; width: 100%; } .creative-member-img img { width:100% } .creative-bar { padding: 8px 30px; position: absolute; bottom: 0; left: 0; width: 100%; z-index: 1; -webkit-transform:translateY(50%); -moz-transform:translateY(50%); -ms-transform:translateY(50%); -o-transform:translateY(50%); transform:translateY(50%); } .creative-bar:before{ background-clip:content-box; content: ""; height: 100%; padding: 0 15px; width: 100%; z-index: -1; position: absolute; left: 0; top: 0; } .creative-bar > span { color: #fff; float: left; font-size: 12px; font-weight: 600; line-height: 17px; } .creative-bar > a { color: #fff; float: right; font-size: 12px; position: relative; text-align: center; width: 35px; } .creative-bar > a:before{ background: rgba(255, 255, 255, 0.2) none repeat scroll 0 0; content: ""; height: 8px; left: 0; margin-top: -4px; position: absolute; top: 50%; width: 1px; } .creative-bar > a:last-child:before{ display:none } .creative-member > h4 { color: #000; float: left; font-size: 20px; margin: 0 0 10px; width: 100%; } .creative-member > h4 a{ color:inherit } .creative-member > p { color: #656565; float: left; font-size: 14px; line-height: 24px; margin: 0; width: 100%; } /*=============== Toggle ===================*/ .toggle { float: left; width: 100%; } .toggle-item { float: left; margin-bottom: 10px; width: 100%; } .toggle-item h3 { background: #e9e9e9; cursor:pointer; color: #363636; float: left; margin: 0; padding: 12px 25px; width: 100%; border-radius: 35px; } .content { float: left; margin: 0; padding: 10px 30px; width: 100%; }  /*=============== Simple Tabs ===================*/ .simple-tabs { float: left; width: 100%; } .simple-tabs .nav { border: 0 none; float: left; width: 100%; } .simple-tabs .nav li { float: left; margin: 0; } .simple-tabs .nav li a, .simple-tabs .nav li a:hover, .simple-tabs .nav li.active a{ background: #fff none repeat scroll 0 0; border: 1px solid #f2f2f2; border-radius: 0; color: #3f3f3f; float: left;  font-size: 14px; letter-spacing: 1px; margin: 0 0 -1px -1px; padding: 10px 30px; text-transform: uppercase; } .simple-tabs .nav li.active a{ background:#363636; color:#FFFFFF; } .simple-tabs .tab-content { background: #fff none repeat scroll 0 0; float: left; padding: 35px; width: 100%; } .tab-content p { letter-spacing: 0.5px; line-height: 26px; } .alignleft { float: left; margin-right: 30px; max-width: 100%; } .alignleft > img { max-width: 100%; } .simple-tabs.gray .tab-content { background: #f8f8f8; padding: 30px 20px; } .simple-tabs.gray { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; } .simple-tabs.style2 .nav li a { background: #f8f8f8 none repeat scroll 0 0; font-size: 12px; letter-spacing: 0; padding: 12px 29px; }  .simple-tabs.style2 .tab-content p { color: #777777; } /*=============== Creative Parallax ===================*/ .creative-parallax { background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0; float: left; padding: 4rem 2rem; text-align: center; } .creative-parallax > span { color: #fff; float: left; font-size: 22px; font-weight: 400; line-height: 25px; margin-bottom: 10px; width: 100%; } .creative-parallax > h4, .creative-parallax > h2 { color: #fff; } .creative-parallax > h4{ float: left; font-size: 2.25rem; letter-spacing: 0rem; width: 100%; line-height: 3rem; text-align: left; } .creative-parallax .button-set a { display: inline-block; float: none; margin: 0 5px; } .creative-parallax2 { background: rgba(199,235,255,0.95) none repeat scroll 0 0; display: table; width: 100%; } .creative-parallax.side-content { background: var(--primarybluetransparent); margin-top: 50rem; } @media(min-width : 1200px){ .creative-parallax.side-content{ border-top-right-radius: 4rem; } .creative-parallax > h4{ padding: 0 60px; } } @media(max-width : 1199px){ .creative-parallax h4{ margin: 0; padding: 20px; width: 100%; } .parallax{ background : none; display : none; } .boxed-container .parallax{ background-attachment: inherit !important; background-size : contain !important; min-height: 450px; position: relative; } .creative-parallax.side-content{ margin-top: 0; } } .creative-img { display: table-cell; max-width: 100%; vertical-align: middle; padding:20px; } .creative-text { display: table-cell; padding: 30px 45px 30px 50px; vertical-align: middle; } .creative-text > span { color: rgb(47,145,205); display: table; font-size: 18px; margin: 0 0 5px; width: 100%; } .creative-text > h4 { color: #000; display: table; width: 100%; font-size: 25px; line-height: 35px; font-weight: 600; margin: 0 0 10px; } .creative-text > p { color: #180e4a; float: left; font-size: 16px; margin-bottom: 20px; width: 100%; } .video-play { background: black none repeat scroll 0 0; color: #fff; display: inline-block; font-size: 22px; height: 77px; line-height: 75px; width: 77px; }  /*=============== Black Boxed ===================*/ .black-boxed { background: rgba(0, 0, 0, 0.84) none repeat scroll 0 0; float: left; padding:60px; width: 100%; } .dark-title { float: left; margin-bottom: 30px; width: 100%; } .dark-title > span { color: #fff; float: left; font-size: 15px; margin-bottom: 5px; width: 100%; } .dark-title h2 { color: #fff; float: left; font-size: 40px; font-weight: 600; margin: 0; text-transform: uppercase; width: 100%; } /*=============== Image Box ===================*/ .image-box { float: left; position: relative; overflow:hidden; z-index:1; width: 100%; } .image-box > img{ width:100% } .image-box > a{ color: #fff; font-size: 12px; height: 34px; left: 50%; line-height: 32px; margin-left: -17px; margin-bottom: -17px; position: absolute; opacity:0; text-align: center; bottom:-50%; width: 34px; -webkit-transition: all 800ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */ -webkit-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */  -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */ -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */ } .image-box:hover > a{ bottom:50%; opacity:1; } .image-box:before { background: black none repeat scroll 0 0; content: ""; height: 0; opacity: 0.5; width: 100%; z-index: 0; position: absolute; bottom: 0; left: 0; } .image-box:hover:before{ height:100% } .view-all { float: left; margin-bottom: 20px; margin-top: -30px; text-align: right; width: 100%; }  /*=============== Case Studies ===================*/ .case-studies { float: left; width: 100%; } .case-studies > div{ padding:0 } .case-study { float: left; position: relative; width: 100%; overflow:hidden; } .case-study > img{ width: 100% } .case-study:hover > img{ -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -ms-transform:scale(1.2); -o-transform:scale(1.2); transform:scale(1.2); } .case-hover { left: 0; padding: 30px; z-index:2; position: absolute; text-align: center; top: 50%; width: 100%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); } .case-study:before { background: #303030 none repeat scroll 0 0; content: ""; height: 100%; left: 0; opacity: 0.72; z-index:1; position: absolute; top: 0; width: 100%; } .case-hover h4 { color: #fff; float: left; font-size: 4rem; line-height: 4.85rem; margin: 0 0 20px; width: 100%; -webkit-transition: all 400ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */ -webkit-transition: all 400ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition: all 400ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition: all 400ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: all 400ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */  -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */ -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */ } .case-hover .coloured-btn { margin-top:10px } /*=============== Simple Carousel ===================*/ .simple-carousel .owl-nav { padding:0 } .simple-carousel .owl-nav > div { margin-left:-65px } .simple-carousel .owl-nav > div.owl-next { margin-right:-65px } .simple-carousel .owl-nav > div:before{ color: #fff; content: "\f177"; } .simple-carousel .owl-nav > div.owl-next:before { content:"\f178" }  /*=============== Creative Boxes ===================*/ .creative-boxes{ float: left; width: 100%; } .creative-boxes > div{ padding:0 } .creative-box { float: left; width: 100%; } .creative-box img { width:100% } .creative-box-overlay { background: rgba(24, 24, 24, 0.75) none repeat scroll 0 0; height: 100%; left: 0; position: absolute; text-align: center; top: 0; width: 100%; } .creative-box:hover .creative-box-overlay{ background:rgba(24,24,24,0.9); } .creative-box-overlay:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; } .creative-box-inner { display: inline-block; text-align: left; vertical-align: bottom; width:80%; } .creative-box-inner > span { float: left; font-family: lato; font-size: 13px; font-style: italic; letter-spacing: 1px; margin-bottom: 5px; width: 100%; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -ms-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear; } .creative-box-inner h5 { color: #fff; float: left; font-size:26px; font-weight: 700; letter-spacing: 1px; line-height: 32px; margin: 0 0 15px; text-transform: uppercase; width: 100%; } .creative-box-inner p{ color: #ffffff; margin: 0; float: left; text-align: left; font-family: 'Poppins'; letter-spacing: 0.5px; font-size: max(1.25rem,min(calc(15.83886px + 1.57978vw),18px)); line-height: 1.2; margin-bottom: 15px; /* padding-left: 40px; */ position: relative; width: 100%; } .creative-box-inner ul li  { color: #fff; } #service-packages .creative-box.platinum:hover .creative-box-overlay{ background: linear-gradient(to bottom, #74808e 0%,#b8bcc9 100%); } #service-packages .creative-box.gold:hover .creative-box-overlay{ background: linear-gradient(to bottom,  #c98232 0%,#f3da90 100%); } #service-packages .creative-box.silver:hover .creative-box-overlay{ background: linear-gradient(to bottom, #7d7d7d 0%,#a0a0a0 100%); } #service-packages .creative-box.smart-service-plans:hover .creative-box-overlay{ background: var(--primaryblue); } .multicolor-column-hover .creative-box:hover .creative-box-overlay{ background: transparent; } .multicolor-column-hover .creative-box:hover .creative-box-inner h5{ opacity: 0; } .highlight-container h2.lead{ line-height: 90px; }  .creative-box:hover .coloured-btn, .creative-box:hover .coloured-btn.transparent{ background-color : var(--primaryblue); }  /*=============== Simple Parallax ===================*/ .simple-parallax { float: left; padding:20px; text-align: center; width: 100%; } .simple-parallax-inner{ float: left; padding:40px; width: 100%; border:5px solid rgba(255, 255, 255, 0.23); }  .simple-parallax h6 { color: #fff; float: left; font-family: 'Poppins'; font-size: 26px; font-style: italic; letter-spacing: 1px; margin: 0; width: 100%; }  /*=============== Creative Services ===================*/ .creative-services { float: left; margin-bottom: -30px; width: 100%; } .creative-service { float: left; margin-bottom: 30px; padding-bottom: 30px; position: relative; width: 100%; padding: 4rem 2.5rem; background: #eefaff; } .lightbluebox{ float: left; margin-bottom: 30px; padding-bottom: 30px; position: relative; width: 100%; padding: 4rem 2.5rem; background: #eefaff; } .lightbox.owl-carousel .picture>a:after,.gallery-widget.lightbox > a:after{ content : '\f00e'; font-family : "fontawesome"; color : #fff; position : absolute; bottom : 2px; right : 2px; width : 50px; height : 50px; font-size : 25px; line-height : 50px; vertical-align : middle; font-weight : 400; text-align : center; opacity : 0.5; } .gallery-widget.lightbox > a:hover:after{ opacity : 0.75; } .creative-service:before{ box-shadow: 0px 10px 29px rgba(0,0,0,0.9); } .creative-service > span { background:#f2f2f2; display: table; font-size: 15px; height: 54px; line-height: 54px; margin-bottom: 15px; text-align: center; width: 54px; } .creative-service:hover > span{ color:#f2f2f2 } .creative-service h4 { color: #010000; float: left; font-size: 22px; line-height:30px; font-weight:600; margin: 0 0 5px; width: 100%; } .creative-service > i { color: #9e9e9e; float: left; font-size: 15px; font-style: normal; letter-spacing: 10px; line-height: 18px; margin-bottom: 10px; width: 100%; } .creative-service > p { color: #424242; float: left; margin-bottom: 20px; width: 100%; } .creative-service > a { display: table; font-size: 13px; } .creative-service > a i { margin-left:10px }  /*=============== Professional Team ===================*/ .professional-team { float: left; margin-bottom: -30px; width: 100%; } .professional-member { float: left; margin-bottom: 30px; width: 100%; } .professional-member-img { display: inline-block; max-width: 48%; vertical-align: middle; } .professional-member-img > img{ width:100% } .professional-member-detail { display: inline-block; max-width: 50%; padding-left: 30px; vertical-align: middle; } .professional-member-detail > span { color: #4a4a4a; float: left; font-family: lato; font-size: 14px; font-style: italic; letter-spacing: 2px; width: 100%; } .professional-member-detail h6 { color: #000; float: left; font-size: 20px; font-weight: 800; margin:5px 0 10px; text-transform: uppercase; width: 100%; } .professional-member-detail > p { color: #424242; float: left; font-size: 13px; line-height: 26px; margin-bottom: 20px; width: 100%; } .professional-member-detail > a { border: 2px solid #eae9e9; color: #000; display: table; font-family: 'Poppins'; font-size: 12px; letter-spacing: 1px; padding: 8px 16px; } .professional-member-detail > a:hover{ color:#FFFFFF } .professional-member-detail .skill-round > div canvas { height: auto !important; width: 100% !important; } .professional-member-detail .skill-round input { top:45px } .skills-carousel { float: left; margin-top: 40px; width: 100%; } .professional-member-detail .skills { margin:0 } .professional-team .skills > i { color: #424242; font-size: 13px; letter-spacing: 0.5px; } .professional-member-detail .skill-round > div:before{ background: #faf9f9 none repeat scroll 0 0 padding-box content-box; content: ""; height: 100%; left: 0; padding: 5px; position: absolute; top: 0; width: 100%; z-index: -1; } .professional-member-detail .skill-round > div input{ color:#424242!important } /*=============== Fancy Post Carousel ===================*/ .header-banner{ /* Standard syntax */ background : none !important; } .cats { float: left; width: 100%; } .cats > a { color: #000; float: left; font-size: 13px; margin-right: 5px; } .fancy-post-detail > h3 { color: #fff; float: left; font-size: 2.5rem; line-height: 1.35em; font-weight: 500; letter-spacing: -0.5px; margin: 0 0 20px; padding-top: 20px; width: 100%; } .fancy-post-detail > p { color: #fff; float: left; font-size: 15px; letter-spacing: 0.0125em; line-height: 1.625em; width: 100%; } .fancy-post-carousel button.slick-arrow { width: 44px; height: 44px; background: rgba(0, 0, 0, 0) none repeat scroll 0 0; color: transparent; right: 35px; margin-top: -40px; top: 50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); -webkit-border-radius: 0%; -moz-border-radius: 0%; -ms-border-radius: 0%; -o-border-radius: 0%; border-radius: 0%; border: none; z-index: 9; } .header-banner .fancy-post-carousel button.slick-arrow:hover{ background: var(--primaryblue); } .fancy-post-carousel button.slick-arrow.slick-next { margin-top: 40px } .fancy-post-carousel button.slick-arrow::before { content: "\f106"; font-size: 44px; color :rgba(255,255,255,0.45); } .fancy-post-carousel button.slick-arrow.slick-next::before { content: "\f107" }  /*=============== Product Categories ===================*/ .innovative-title { float: left; margin-bottom: 60px; padding-bottom: 30px; position: relative; text-align: center; width: 100%; } .innovative-title h2 { color: #2f2f2f; float: left; font-size: 36px; font-weight: 700; margin: 0 0 5px; width: 100%; } .innovative-title span { color: #a5a5a5; float: left; font-size: 13px; font-style: italic; line-height: 14px; width: 100%; } .innovative-title:before, .innovative-title:after { border-top: 2px dotted #b3b3b3; bottom: 0; content: ""; left: 50%; margin-left: 30px; position: absolute; width: 15%; } .innovative-title::after { left: auto; margin-left: 0; margin-right: 30px; right: 50%; } .innovative-title h2:before { border: 1px solid #9f9f9f; border-radius: 50%; bottom: -7px; content: ""; height: 17px; left: 50%; margin-left: -8.5px; position: absolute; width: 17px; } .all-product-categories { float: left; margin-bottom: -30px; padding: 0 50px; width: 100%; } .product-category { float: left; margin-bottom: 30px; padding-bottom: 45px; position: relative; width: 100%; } .product-category img { width:100% } .all-product-categories .row{ margin:0 -10px } .all-product-categories .row > div{ padding:0 10px } .category-name { background: #303030 none repeat scroll 0 0; padding: 20px 30px; text-align: center; width: 80%; position: absolute; bottom: 0; left: 10%; } .category-name h4 { color: #fff; float: left; font-size: 20px; letter-spacing:1px; font-weight: 700; margin: 0 0 5px; width: 100%; } .category-name h4 a { color:inherit } .category-name > span { color: #848484; float: left; font-family: 'Poppins'; font-size: 12px; font-style: italic; letter-spacing: 0.3px; width: 100%; }  /*=============== Fancy Product ===================*/ .fancy-product { float: left; position: relative; width: 100%; } .product-img { float: left; position: relative; width: 100%; } .product-img-show{ float: left; width: 100%; position:absolute; display:none; } .product-img-show.active{ position:relative; display:block; } .product-img-show > img { width: 100% } .like { z-index:1; opacity:0; position: absolute; right:-50px; top: 20px; -webkit-transition: all 500ms cubic-bezier(1.000, 0.000, 0.000, 1.000); -moz-transition: all 500ms cubic-bezier(1.000, 0.000, 0.000, 1.000); -o-transition: all 500ms cubic-bezier(1.000, 0.000, 0.000, 1.000); transition: all 500ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */ -webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); -moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); -o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */ -webkit-transition-delay:0.3s; -moz-transition-delay:0.3s; -ms-transition-delay:0.3s; -o-transition-delay:0.3s; transition-delay:0.3s; } .product-img:hover .like{ opacity:1; right:20px; } .like > a { background: black none repeat scroll 0 0; color: #fff; float: left; line-height: 32px; text-align: center; width: 42px; } .product-btns { bottom: 20px; z-index:1; position: absolute; right:-60px; width: 42px; opacity:0; -webkit-transition: all 500ms cubic-bezier(1.000, 0.000, 0.000, 1.000); -moz-transition: all 500ms cubic-bezier(1.000, 0.000, 0.000, 1.000); -o-transition: all 500ms cubic-bezier(1.000, 0.000, 0.000, 1.000); transition: all 500ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */ -webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); -moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); -o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */ -webkit-transition-delay:0.5s; -moz-transition-delay:0.5s; -ms-transition-delay:0.5s; -o-transition-delay:0.5s; transition-delay:0.5s; } .product-img:hover .product-btns{ opacity:1; right:20px; }  .product-btns > a { background: #000 none repeat scroll 0 0; color: #fff; float: left; line-height: 52px; margin-bottom: 1px; text-align: center; width: 100%; } .product-thumbs{ width:100px; height:100%; opacity:0; visibility:hidden; position: absolute; left:0; top:0; -webkit-transition-delay:0.1s; -moz-transition-delay:0.1s; -ms-transition-delay:0.1s; -o-transition-delay:0.1s; transition-delay:0.1s; } .product-img:hover .product-thumbs{ visibility:visible; left:-100px; opacity:1; } .product-thumbs > a { float:left; width:100%; height:33.334%; overflow:hidden; } .product-thumbs > a img{ width:100%; height:100%; } .product-img:before { border: 3px solid #ececec; content: ""; height: calc(100% + 20px); width:0; z-index: -1; opacity:0; position: absolute; right:0; top: -10px; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -ms-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear; } .product-img:hover:before{ opacity:1; width: calc(100% + 110px); } .fancy-product:hover{ z-index:1 } .fancy-product-detail { float: left; padding: 30px 0 0; width: 100%; } .product-cats { float: left; margin-bottom: 10px; width: 100%; } .product-cats > a { color: #202020; float: left; font-size: 8px; letter-spacing: 3px; } .fancy-product-detail h5 { color: #575757; float: left; font-size: 17px; margin: 0 0 10px; width: 100%; } .fancy-product-detail h5 a{ color:inherit } .fancy-product-detail > span { border-bottom: 1px dashed #ebebeb; float: left; font-family: 'Poppins'; font-size: 18px; font-weight: 700; margin-bottom: 10px; padding-bottom: 5px; width: 100%; } .cart-btn { background: #dedede none repeat scroll 0 0; color: #373737; display: inline-block; font-family: 'Poppins'; font-size: 11px; font-weight: 500; padding: 10px 20px; text-transform: uppercase; } .cart-btn:hover{ color:#FFFFFF } /*=============== Full Product ===================*/ .merge > div { padding:0 } .merge { margin:0 } .style2 .full-product-text { padding:40px 30px } @media(max-width : 1199px){ .style2 .full-product-text { padding:60px 40px } } .style2 .full-product-text ul.bulletpoints li{ font-size: 15px; line-height: 22px; padding-left : 40px; } .style2 .full-product-text.detail-boxes{ padding : 2rem; } @media(min-width : 1280px){ .style2 .full-product-text.detail-boxes{ padding : 4rem 2rem; } .about-detail>img, .sub-section>img { border-radius: 25px 5px; } } .style2 .full-product-text.detail-boxes{ padding : 2rem; } .full-product { float: left; width: 100%; } .full-product-detail, .full-product-img { display: inline-block; margin:0; vertical-align: middle; width: 50%; } .full-product.style2 .full-product-detail{ width:100% } .full-product-img > img { width:100% } .full-product-text { float: left; padding: 50px; width: 100%; } .full-product-text h3 { color: #000; float: left; font-size: 25px; font-weight: 700; line-height: 32px; margin: 0 0 8px; width: 100%; } .full-product-text > span { color: #fff; float: left; font-family: 'Poppins'; font-size: 18px; font-weight: 600; margin-bottom: 15px; width: 100%; } .full-product-text > p { float: left; font-size: 1.385rem; letter-spacing: 0.0125rem; line-height: 1.85rem; font-weight: 400; margin: 0; width: 100%; } .full-product-carousel { float: left; width: 100%; } .full-product-slide { float: left; width: 100%; } .full-product-slide > img { float: left; width: 100%; } /*=============== About Boxes ===================*/ .about-boxes { float: left; margin-bottom: -30px; width: 100%; } .about-box { float: left; margin-bottom: 30px; position: relative; width: 100%; } .about-box img { width:100% } .about-hover{ left: 0; padding: 20px 40px; position: absolute; text-align: center; top: 50%; width: 100%; opacity:0; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); } .about-box:hover .about-hover{ opacity:1 } .about-box:before{ background: #e9e9e9 none repeat scroll 0 0; content: ""; height:0; left: 0; opacity: 0.89; position: absolute; top:50%; width: 100%; } .about-box:hover:before{ top:0; height:100%; } .about-hover > i { display: block; font-size: 30px; margin-bottom:0; opacity:0; -webkit-transition: all 800ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */ -webkit-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */  -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */ -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */ } .about-box:hover .about-hover > i{ opacity:1; margin-bottom:40px; } .about-hover h4 { color: #1a1a1a; float: left; font-size: 27px; font-weight: 600; line-height: 25px; margin: 0 0 10px; width: 100%; } .about-hover > span { float: left; font-size: 17px; font-style: italic; line-height: 20px; width: 100%; } .about-hover a{ display: inline-block; font-size: 30px; margin:0; opacity:0; -webkit-transition: all 800ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */ -webkit-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */  -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */ -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */ } .about-box:hover .about-hover a{ opacity:1; margin-top:50px; }  /*=============== Simple Parallax Text ===================*/ .simple-parallax-text { float: left; width: 100%; } .simple-parallax-text > span { color: #fff; float: left; font-family: 'Poppins'; font-size: 17px; font-style: italic; letter-spacing: 1px; margin-bottom: 5px; width: 100%; } .simple-parallax-text h3 { color: #fff; float: left; font-size: 37px; font-weight: 600; margin: 0 0 20px; text-transform: uppercase; width: 100%; } .simple-parallax-text > p { color: #cdcdcd; float: left; font-size: 15px; margin: 0; width: 100%; }  /*=============== Parallax Tabs ===================*/ .parallax-tabs { float: left; text-align: center; width: 100%; } .parallax .nav { display: inline-block; margin: 0 auto; width: auto; } .parallax-tabs ul.nav { border: 0 none; display: inline-block; float: none; margin:0 auto 50px; width: auto; background: var(--lightestblue); padding: 5px; border-radius: 20px; } .parallax-tabs ul.nav li a{ color: var(--secondaryblue); border: 2px solid var(--secondaryblue); } .parallax-tabs ul.nav li.active a{ background: linear-gradient(to right, rgb(40,147,206), rgba(255,0,0,0) 100%), linear-gradient(to right, rgb(40,147,206), rgba(0,255,0,0) 100%), linear-gradient(to right, rgb(3,34,172), rgb(0,0,255) 100%); background:-webkit-linear-gradient(90deg, rgb(55 114 213), rgb(31, 137, 201) 100%), -webkit-linear-gradient(100deg, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), -webkit-linear-gradient(260deg, rgb(40, 147, 206), rgb(0, 0, 206) 100%); background: -moz-linear-gradient(90deg, rgb(55 114 213), rgb(31, 137, 201) 100%), -moz-linear-gradient(100deg, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), -moz-linear-gradient(260deg, rgb(40, 147, 206), rgb(0,0,206) 100%); background: -o-linear-gradient(90deg, rgb(55 114 213), rgb(31, 137, 201) 100%), -o-linear-gradient(100deg, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), -o-linear-gradient(260deg, rgb(40, 147, 206), rgb(0,0,206) 100%); background: -ms-linear-gradient(90deg, rgb(55 114 213), rgb(31, 137, 201) 100%), -ms-linear-gradient(100deg, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), -ms-linear-gradient(260deg, rgb(40, 147, 206), rgb(0,0,206) 100%); color: var(--white) !important; } .parallax-tabs ul.nav li a, .parallax-tabs ul.nav li.active a { border: 0 none; border-radius: 20px; float: left; font-size: 2rem; font-weight: 400; margin: 0; padding: 2rem 2rem; position: relative; } .parallax-tabs ul.nav li a i { margin-right: 10px; } .parallax-tabs .tab-content { float: left; text-align: left; width: 100%; } @media(max-width : 980px){ .parallax-tabs label{ font-size: 12px; padding: 1rem 1.25rem; } .plan-toggle__indicator span{ font-size: 12px; } } .image { float: left; width: 100%; } .image img{ width:100% }  /*=============== Simple Price Table ===================*/ .simple-price-table { float: left; margin-bottom: -30px; width: 100%; } .simple-table { float: left; margin-bottom: 30px; width: 100%; } .simple-table-top { float: left; position: relative; width: 100%; z-index: 1; } .simple-table-top > img { width:100% } .table-top-title { left: 0; padding: 10px 20px; position: absolute; text-align: center; top: 50%; width: 100%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); } .table-top-title h5 { color: #fff; float: left; font-size: 20px; margin: 0 0 5px; width: 100%; } .table-top-title i { color: #fff; float: left; font-family: lato; font-size: 13px; letter-spacing: 1px; width: 100%; } .simple-table-top > span { bottom: 0; color: #fff;  font-size: 18px; left: 50%; padding: 10px 20px; position: absolute; -webkit-transform:translateX(-50%) translateY(50%); -moz-transform:translateX(-50%) translateY(50%); -ms-transform:translateX(-50%) translateY(50%); -o-transform:translateX(-50%) translateY(50%); transform:translateX(-50%) translateY(50%); } .simple-table-top:before { background: black none repeat scroll 0 0; content: ""; height: 100%; left: 0; opacity: 0.7; position: absolute; top: 0; width: 100%; } .simple-table-bottom { background: #f9f9f9 none repeat scroll 0 0; border: 5px solid #efefef; float: left; text-align: center; padding: 50px; width: 100%; } .simple-table-bottom > ul { float: left; list-style: outside none none; margin: 0; padding: 0; width: 100%; } .simple-table-bottom > ul li { color: #2a2a2a; font-size: 14px; font-weight: 600; line-height: 30px; } .simple-table-bottom .dark-btn{ margin-top:30px }  /*=============== Classic Portfolio ===================*/ .classic-portfolio { float: left; width: 100%; position:relative; z-index:1; } .classic-portfolio > img { width: 100% } .classic-portfolio-hover { left: 0; padding: 20px; position: absolute; z-index:2; top: 5%; width: 100%; } @media(max-width : 991px){ .classic-portfolio-hover{ position : relative; } .classic-portfolio.theme-bg-1 img, .classic-portfolio.theme-bg-2 img, .classic-portfolio.theme-bg-3 img, .classic-portfolio.bg-primary-blue img{ display: none; } .classic-portfolio.theme-bg-1, .classic-portfolio.theme-bg-2, .classic-portfolio.theme-bg-3, .classic-portfolio.bg-primary-blue{ padding-bottom: 30px; } .no-gap .masonary>div{ width : 100%; } } .classic-portfolio-hover > h4 { color: #ffffff; text-align: left; float: left; font-size: 2.245rem; letter-spacing: 0; line-height: 3rem; font-weight: 600; margin: 0; width: 100%; padding-bottom: 10px; } .classic-portfolio-hover > p { color: #ffffff; text-align: left; float: left; font-size: 1.5rem; letter-spacing: 0.025rem; line-height: 2.25rem; font-weight: 400; margin: 0; width: 100%; } .classic-portfolio-hover > span a, .classic-portfolio-hover > span a:hover { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; color: inherit; height: auto; line-height: 15px; margin: 0; width: auto; } .classic-portfolio-hover > .lightbox { display:inline-block } .classic-portfolio:before { content: ""; left: 0; opacity: 0.85; position: absolute; z-index:1; top: 0; width: 100%; height:100%; }  /*=============== All Simple Products ===================*/ .all-simple-products { float: left; margin-bottom: -30px; width: 100%; } .simple-product { float: left; margin-bottom: 30px; width: 100%; } .simple-product-img { float: left; position: relative; margin-bottom:15px; width: 100%; } .simple-product-img img { width:100% } .simple-product-img:before{ background:#000; content: ""; height:100%; left:0; opacity:0; position:absolute; top:0; width:0; -webkit-transition: all 500ms cubic-bezier(0.390, 0.575, 0.565, 1.000); -moz-transition: all 500ms cubic-bezier(0.390, 0.575, 0.565, 1.000); -o-transition: all 500ms cubic-bezier(0.390, 0.575, 0.565, 1.000); transition: all 500ms cubic-bezier(0.390, 0.575, 0.565, 1.000); /* easeOutSine */  -webkit-transition-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000); -moz-transition-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000); -o-transition-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000); transition-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000); /* easeOutSine */ } .simple-product-img:hover:before{ width:100%; opacity:0.69; } .simple-product-hover { padding: 10px 20px; text-align: center; position: absolute; left: 0; top: 50%; width: 100%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); } .simple-product-hover > a{ background: #fff none repeat scroll 0 0; color: #000000; display: inline-block; font-size: 20px; height: 42px; line-height: 42px; margin:0 25px; width:42px; opacity:0; -webkit-transform:scale(0.4); -moz-transform:scale(0.4); -ms-transform:scale(0.4); -o-transform:scale(0.4); transform:scale(0.4); } .simple-product-img:hover .simple-product-hover > a{ margin:0 5px; opacity:1; -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1); } .simple-product > span { color: #5b5b5b; float: left;  font-size: 13px; margin-bottom: 10px; width: 100%; } .simple-product h4 { color: #313131; float: left; font-size: 16px; margin: 0 0 10px; width: 100%; } .simple-product h4 a { color:inherit } .simple-product > a{ color: #5b5b5b; display: inline-block; font-size: 16px; } .simple-product-hover > a:hover{ color:#FFFFFF }  /*=============== Fancy Text Carousel ===================*/ .fancy-text-carousel { float: left; width: 100%; margin:60px 0; } .fancy-text { float: left; width: 100%; } .fancy-text strong { color: #fff; float: left; font-size:64px; font-weight: 900; letter-spacing: 3px; line-height:60px; margin-bottom: 15px; text-transform: uppercase; width: 100%; } .fancy-text > span { color: #fff; float: left; font-family: 'Poppins'; font-size:35px; font-weight: 600; letter-spacing: 1px; line-height: 50px; margin-bottom: 20px; width: 100%; } .bg-text { color: #fff; float: left; font-size: 15px; letter-spacing: 5px; padding: 8px 24px; text-transform: uppercase; } .fancy-text strong i { font-weight: 400; text-transform: capitalize; } .fancy-text-carousel .owl-nav { padding:0 } .fancy-text-carousel .owl-nav > div { border: 0 none; margin-left: -90px; } .fancy-text-carousel .owl-nav > div.owl-next { margin-right:-90px } .fancy-text-carousel .owl-nav > div::before { color: #fff; font-size: 120px; } .style2.fancy-text strong, .style2.fancy-text > span{ display: table; float: none; width: auto; color:#141313; } .style2 .bg-text { display: table; float: none; width: auto; } .fancy-text.style2 > img { float: right; max-width: 50%; } /*=============== Classic Services ===================*/ .classic-services{ float:left; width:100%; margin-bottom:-30px; } .classic-service { display: table; margin-bottom: 30px; width: 100%; } .classic-service > span { display: table-cell; vertical-align: middle; } .classic-service span i { border: 1px solid #373737; border-radius: 50%; color: #2d2d2d; display: inline-block; font-size: 33px; height: 92px; line-height: 92px; text-align: center; width: 92px; } .classic-service-desc { display: table-cell; padding-left: 30px; vertical-align: middle; } .classic-service-desc > h4 { color: #202020; float: left; font-size: 19px; font-weight: 600; margin: 0 0 10px; text-transform: uppercase; width: 100%; } .classic-service-desc > p { color: #616161; float: left; font-size: 13px; line-height: 26px; margin: 0; width: 100%; }  /*=============== Product Box ===================*/ .product-box { float: left; margin-bottom: 30px; position: relative; width: 100%; } .product-box img{ width:100% } .product-box-hover { bottom:0; left:0; padding:0 40px 40px; position:absolute; width:100%; } .product-box:before { background:black; content:""; height:0; opacity:0.75; width:0; position:absolute; left:0; bottom:0; -webkit-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); -moz-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); -o-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */  -webkit-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); -moz-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); -o-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */ } .product-box:hover:before{ opacity:0.75; width:100%; height:100%; } .product-box-hover > span { color: #fff; float: left;  font-size: 19px; line-height: 20px; width: 100%; opacity:0; -webkit-transform:translateX(-100px); -moz-transform:translateX(-100px); -ms-transform:translateX(-100px); -o-transform:translateX(-100px); transform:translateX(-100px); -webkit-transition: all 800ms cubic-bezier(0.175, 0.885, 0.320, 1); /* older webkit */ -webkit-transition: all 800ms cubic-bezier(0.175, 0.885, 0.320, 1.275); -moz-transition: all 800ms cubic-bezier(0.175, 0.885, 0.320, 1.275); -o-transition: all 800ms cubic-bezier(0.175, 0.885, 0.320, 1.275); transition: all 800ms cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); /* older webkit */ -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */ } .product-box-hover > h4 { color: #fff; float: left; font-size: 25px; margin: 3px 0 20px; width: 100%; opacity:0; -webkit-transform:translateX(100px); -moz-transform:translateX(100px); -ms-transform:translateX(100px); -o-transform:translateX(100px); transform:translateX(100px); -webkit-transition: all 800ms cubic-bezier(0.175, 0.885, 0.320, 1); /* older webkit */ -webkit-transition: all 800ms cubic-bezier(0.175, 0.885, 0.320, 1.275); -moz-transition: all 800ms cubic-bezier(0.175, 0.885, 0.320, 1.275); -o-transition: all 800ms cubic-bezier(0.175, 0.885, 0.320, 1.275); transition: all 800ms cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); /* older webkit */ -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */ } .product-box:hover .product-box-hover > span, .product-box:hover .product-box-hover > h4{ opacity:1; -webkit-transform:translateX(0); -moz-transform:translateX(0); -ms-transform:translateX(0); -o-transform:translateX(0); transform:translateX(0); } .product-box-hover > h4 a { color:inherit } .product-links { float: left; width: 100%; } .product-links > a{ background: #fff none repeat scroll 0 0; color: #4a4a4a; float: left; font-size: 17px; height: 42px; line-height: 42px; margin-right: 10px; text-align: center; width: 42px; opacity:0; -webkit-transform:translateY(100px); -moz-transform:translateY(100px); -ms-transform:translateY(100px); -o-transform:translateY(100px); transform:translateY(100px); -webkit-transition-delay:0.3s; -moz-transition-delay:0.3s; -ms-transition-delay:0.3s; -o-transition-delay:0.3s; transition-delay:0.3s; } .product-links > a:last-child{ -webkit-transition-delay:0.5s; -moz-transition-delay:0.5s; -ms-transition-delay:0.5s; -o-transition-delay:0.5s; transition-delay:0.5s; } .product-box:hover .product-links > a{ opacity:1; -webkit-transform:translateY(0); -moz-transform:translateY(0); -ms-transform:translateY(0); -o-transform:translateY(0); transform:translateY(0); } /*=============== Sidebar ===================*/ .sidebar .widget { background:#d7f4ff; padding:40px; margin-bottom:40px; } .sidebar .widget-title { color: #111; font-size: 20px; font-weight: 600; letter-spacing: 2px; margin-bottom: 30px; text-transform: uppercase; } .sidebar .widget-title i { margin-right:10px } .widget > ul { float: left; list-style: outside none none; margin: 0; padding: 0; width: 100%; } .widget li { color: #9f9f9f; float: left; line-height: 30px; margin-bottom: 10px; padding-left: 20px; position: relative; width: 100%; } .widget li a{ color:inherit } .widget li span { border: 2px solid #959595; float: right; font-size: 12px; height: 30px; line-height: 27px; text-align: center; width: 30px; } .widget li:before { content: "\f105"; font-family: fontawesome; font-size: 12px; line-height: 31px; position: absolute; left: 0; top: 0; } .affiliation-widget { margin: 0 -10px -10px } .affiliation-widget > a { float: left; margin-bottom: 10px; padding: 0 5px; width: 50%; } .affiliation-widget > a img { width:100% } .feature-post-carousel { float: left; width: 100%; } .feature-post { float: left; width: 100%; } .feature-post > img { width:100% } .feature-post h6 { color: #313131; font-size: 15px; margin: 20px 0 0; width: 100%; } .feature-post h6 a{ color:inherit } .widget .feature-post .meta{ margin-bottom: 5px; margin-top: 10px; } .widget .feature-post .meta li { line-height: 15px; margin-bottom: 0; padding: 0; width: auto; } .widget .feature-post .meta li:before { display:none } .widget .feature-post > p{ color: #424242; font-family: 'Poppins'; font-size: 13px; letter-spacing: 1.5px; line-height: 24px; margin-top: 10px; } .feature-post-carousel .owl-dots{ text-align:left } .social-widget { float: left; margin-bottom: -10px; width: 100%; } .social-widget > a { background: #f1f1f1 none repeat scroll 0 0; color: #969595; float: left; font-size: 13px; height: 36px; line-height: 35px; margin-bottom: 10px; margin-right: 10px; text-align: center; width: 36px; } .social-widget > a:hover{ color:#FFFFFF }  .sidebar-tabs { margin:-40px } .sidebar-tabs .nav.nav-tabs { border: 0 none; float: left; margin-bottom: 30px; width: 100%; } .sidebar-tabs .nav.nav-tabs li { border: 0 none; float: left; list-style: outside none none; margin: 0; padding: 0; width: auto; } .sidebar-tabs .nav.nav-tabs li:before { display:none } .sidebar-tabs .nav.nav-tabs li a { border: 0 none; border-radius: 0; color: #313131; float: left;  font-size: 13px; letter-spacing: 1px; margin: 0; padding: 12px 30px; text-transform: uppercase; } .sidebar-tabs .nav.nav-tabs li.active a { background:#444; color:#fff; }  .sidebar .tab-content { float: left; padding: 0 30px 30px; width: 100%; } .sidebar .tab-content .news { border: 0 none; margin: 0 0 20px; padding: 0; } .sidebar .news-detail > h4 { color:#313131 } .news-detail .meta { margin:0 } .news-detail .meta li { line-height: 20px; margin-bottom: 0; padding: 0; width: auto; } .news-detail .meta li:before{ display:none }  /*=============== Page Top ===================*/ .page-top { background: transparent url("../images/resource/pagetop.jpg") no-repeat scroll 0 0 / cover ; float: left; padding: 100px 0; position: relative; text-align: center; width: 100%; z-index: 1; } .page-top.extra-gap{ padding-top:200px } .page-top::before { background: black none repeat scroll 0 0; content: ""; height: 100%; left: 0; opacity: 0.3; position: absolute; top: 0; width: 100%; z-index: -1; } .page-top h1 { color: #fff; float: left; font-size: 3.95rem; line-height: 5rem; letter-spacing: 0.0125rem; font-weight: 700; margin: 0 0 15px; text-transform: uppercase; width: 100%; } .page-top ul { display: inline-block; list-style: outside none none; margin: 0; padding: 0; } .page-top ul li { color: #fff; float: left;  font-size: 13px; letter-spacing: 1px; padding: 0 15px; position: relative; text-transform: uppercase; } .page-top ul li a{ color: inherit } .page-top ul li:before { content: "\f061"; position: absolute; right: -4px; font-family: 'FontAwesome'; } .page-top ul li:last-child:before{ display:none } .themed-border{ border-radius: var(--themedborder); } @media(max-width : 1199px){ .themed-border{ border-radius: var(--themedbordermedium); } } .themed-border-small{ border-radius: var(--themedbordersmall); } .themed-header{ position: absolute; width: 80%; margin: 0; transform: translate(calc(50vw - 50%) , 0); background: #fff; color: #000 !important; padding: 5rem 1.5rem; border-radius: 15px; } .page-top .themed-header h1, .page-top .themed-header span,.page-top .themed-header li{ color: #000; } .themed-header ul{ display: none; } /*=============== Pagination ===================*/ .pagination { float: left; margin: 50px 0 0; text-align: center; width: 100%; } .pagination > ul { display: inline-block; list-style: outside none none; margin: 0; padding: 0; } .pagination > ul li { border: 2px solid #dadada; color: #dadada; float: left; font-size: 13px; font-weight: 600; height: 36px; line-height: 33px; margin: 0 5px; width: 36px; position:relative; } .pagination > ul li:first-child { font-size: 16px; margin-right: 40px; } .pagination > ul li:last-child { font-size: 16px; margin-left: 40px; } .pagination > ul li a{ color:inherit } .pagination > ul li.active{ color:#FFFFFF } .pagination li.active:before{ bottom: -10px; color: black; content: "..."; font-size: 22px; left: 0; line-height: 15px; position: absolute; width: 100%; }  /*=============== Blog Single ===================*/ .default-template { float:left; width:100%; margin-bottom: 5rem; margin-top: 3.5rem; } .single-img { float: left; margin-bottom: 40px; text-align: center; width: 100%; } .single-img > img { max-width:100%; width : 100%; } .default-template img { max-width:100%; } .post-title { color: #313131; float: left; font-size: 25px; font-weight: 600; letter-spacing: 0.5px; margin: 0 0 30px; width: 100%; } .single-meta { float: left; list-style: outside none none; margin:0 0 30px; padding: 0; width: 100%; } .single-meta > li{ border-right: 1px solid #9f9f9f; float: left; font-size: 13px; font-style: italic; font-weight: 600; letter-spacing: 2px; line-height: 15px; padding: 0 25px; text-transform: uppercase; } .single-meta > li:first-child{ padding-left:0 } .single-meta > li a{ color:inherit } .single-meta > li:last-child{ border:0 } .default-template blockquote i { font-size: 20px; position: absolute; } .default-template blockquote i.fa-quote-left { left: 25px; top: 25px; } .default-template blockquote i.fa-quote-right { bottom: 35px; right: 30px; } .tagcloud { float: left; width: 100%; margin-top: 20px; } .tagcloud > a { border: 2px dotted #f4f4f4; color: #7e7e7e; float: left; font-family: 'Poppins'; font-size: 13px; font-weight: 300; line-height: 13px; margin-right: 10px; padding: 10px 20px 10px 30px; position: relative; -webkit-border-radius:6px; -moz-border-radius:6px; -ms-border-radius:6px; -o-border-radius:6px; border-radius:6px; } .tagcloud > a:before{ border: 2px solid #f4f4f4; content: ""; height: 10px; margin-top: -5px; width: 10px; position: absolute; left: 10px; top: 50%; }   .download { float: left; margin-top: 90px; width: 100%; } .download-inner { display: table; position: relative; width: 100%; z-index: 1; } .download-inner:before { content: ""; height: 100%; left: 0; opacity: 0.8; position: absolute; top: 0; width: 100%; z-index: -1; }  @media(max-width : 980px){ .download-inner *{ display:block !important; width : 100% !important; float :left; } .download-inner .download-detail{ padding : 20px 10px !important; } } .download-inner > img { display: table-cell; vertical-align: top; max-width: 269px; height:auto; } .download-detail { display: table-cell; padding: 0 0 0 40px; vertical-align: middle; width: 40%; } .download-social { display: table-cell; padding: 0 20px; text-align: center; vertical-align: middle; } .download-detail h6 { float: left; font-size: 20px; font-weight: 700; letter-spacing: 0px; margin: 0 0 10px; width: 100%; } .download-detail > p { color: #000000; float: left; font-size: 16px; font-weight: 500; line-height: 28px; margin: 0; width: 100%; } .download-social strong{ color: #fff; float: left; font-family: 'Poppins'; font-size: 22px; margin-bottom: 20px; width: 100%; } .download-social > a { background: #575757 none repeat scroll 0 0; color: #fff; display: inline-block; height: 41px; line-height: 41px; margin: 0 5px; text-align: center; width: 41px; }  .related-projects { float: left; margin-top: 100px; width: 100%; } .modern-title { float: left; margin-bottom: 50px; padding-bottom: 40px; position: relative; width: 100%; } .modern-title:before{ background: black none repeat scroll 0 0; bottom: 0; content: ""; height: 8px; left: 0; position: absolute; width: 20px; } .modern-title > h2 { float: left; font-size: 38px; font-weight: 600; letter-spacing: 5px; margin: 0 0 10px; width: 100%; } .modern-title > span { color: #616060; float: left; font-size: 20px; font-weight: 300; letter-spacing: 1px; width: 100%; } .comments-section { background: #fafafa none repeat scroll 0 0; float: left; margin-top: 100px; width: 100%; } .comment-title { background: #f0f0f0 none repeat scroll 0 0; color: #555555; float: left; font-size: 20px; font-weight: 800; letter-spacing: 1px; margin-bottom: 50px; padding: 20px; text-align: center; text-transform: uppercase; width: 100%; } .comments-section > ul { float: left; list-style: outside none none; margin: 0; padding: 40px 80px 80px; width: 100%; } .comment { display: table; float: left; width: 100%; } .avatar { display: table-cell; vertical-align: top; } .comment-text { display: table-cell; padding-left: 40px; } .name { color: #383838; float: left; font-size: 18px; font-weight: 500; margin: 0 0 10px; width: 100%; } .comment-text > span { float: left; font-size: 14px; margin-bottom: 10px; width: 100%; } .comment-text > p { color: #555555; float: left; font-size: 14px; font-weight: 400; letter-spacing: 1px; margin-bottom: 20px; width: 100%; } .rep { font-family: 'Poppins'; font-size: 13px; font-weight: 300; letter-spacing: 1px; } .avatar > img { -webkit-border-radius:20px; -moz-border-radius:20px; -ms-border-radius:20px; -o-border-radius:20px; border-radius:20px; } .comments-section > ul li { float: left; margin-bottom: 50px; width: 100%; } .comments-section ul ul { float: left; list-style: outside none none; margin: 70px 0 0; padding: 0 0 0 100px; width: 100%; } .comment-form { float: left; margin-top: 100px; width: 100%; }  /*=============== About Page 1 ===================*/ .style2 .tab-description, .style2 .tab-mockup { padding-bottom: 0; vertical-align: middle; } .style2 .tab-description, .style2 .tab-mockup { padding-bottom: 0; vertical-align: middle; } .dark .tab-description > span { color:#4a4a4a } .dark .tab-description > h4 { color:#010000 } .dark .tab-description > p { color: #424242; font-size: 15px; } .light .toggle-item h3 { background: #fff; color: #363636; } .light.toggle .content p { color:#a49e9e } .light .toggle-item h3.active{ color:#FFF } .bg-dark-green .green .toggle-item h3{ background-color : #25611f; } .green .toggle-item h3.active, .bg-dark-green .green .toggle-item h3.active{ background-color : var(--green); color : #fff; } .blue .toggle-item h3.active, .bg-dark-blue .blue .toggle-item h3.active{ background-color : var(--primaryblue); color : #fff; } .highlight.green{ color:var(--green); } .blue .toggle-item h3:before, .green .toggle-item h3:before { content: '\f054'; width: 20px; height: 20px; float: right; font-family: 'FontAwesome'; } .blue .toggle-item h3.active:before, .green .toggle-item h3.active:before { content: '\f078'; } .highlight-bg{ color: #ffffff; padding: 5px 15px; border-radius: var(--themedbordersmall); } .highlight-bg.platinum{ background: linear-gradient(to bottom, #74808e 0%,#b8bcc9 100%); } .highlight-bg.gold{ background: linear-gradient(to bottom,  #c98232 0%,#f3da90 100%); } .highlight-bg.silver{ background: linear-gradient(to bottom, #7d7d7d 0%,#a0a0a0 100%); } .highlight-bg.blue{ background: var(--primaryblue); }  /*=============== About CEO ===================*/ .about-ceo { float: left; position: relative; width: 100%; } .about-ceo > img{ width:100% } .ceo-overlay { padding: 20px 40px; text-align: center; position: absolute; left: 0; top: 50%; width: 100%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); } .about-ceo:before{ background: black none repeat scroll 0 0; content: ""; height: 100%; opacity: 0.64; position: absolute; left: 0; top: 0; width: 100%; } .ceo-overlay > h4 { color: #fff; float: left; font-size: 25px; font-weight: 600; letter-spacing: 1px; margin: 0 0 10px; width: 100%; } .ceo-overlay > h4 a { color:inherit } .ceo-overlay > span { float: left; font-size: 11px; font-weight: 700; letter-spacing: 4px; line-height: 15px; text-transform: uppercase; width: 100%; }  .about-skills > p { float: left; margin-bottom: 30px; width: 100%; } .full-img { float: left; margin-bottom: 30px; width: 100%; } .full-img > img{ max-width:100% } /*=============== Company View ===================*/ .company-view { float: left; width: 100%; } .company-view p { float: left; margin-top: 30px; width: 100%; } .readmore { float: left;  font-size: 11px; font-weight: 600; letter-spacing: 1px; margin-top: 10px; width: 100%; } .video { float: left; position: relative; width: 100%; } .video > img{ width:100% } .video:before{ background: black none repeat scroll 0 0; content: ""; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 100%; } .video:hover:before{ opacity:0.4 } .video > a { color: #fff; height: 58px; line-height: 58px; margin-left: -29px; margin-top: -29px; text-align: center; width: 58px; position: absolute; left: 50%; top: 50%; -webkit-transform:scale(0); -moz-transform:scale(0); -ms-transform:scale(0); -o-transform:scale(0); transform:scale(0); } .video:hover > a{ -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1); } /*=============== Company Skills ===================*/ .company-skills { float: left; width: 100%; } .company-skills-img { display: table-cell; padding: 30px 0; vertical-align: middle; width:40%; } .company-skills-img > img { width:100% } .company-skills-detail { background: #f9f9f9 none repeat scroll 0 0; display: table-cell; padding:70px; position: relative; width: 50%; } .company-skills-detail::before, .company-skills-detail::after { border-bottom: 31px solid #d9d9d9; border-left: 40px solid transparent; content: ""; height: 0; left: -40px; position: absolute; top: 0; width: 0; } .company-skills-detail:after { border-bottom: 0 none; border-top: 31px solid #d9d9d9; bottom: 0; top: auto; } .company-skills-detail .progressbars{ margin-top:40px } /*=============== Map ===================*/ .map{ float:left; width:100%; } .map #map-canvas{ height:500px; margin:0px; padding:0px }  .contact .map { display: table-cell; float: none; position: relative; width: auto; } .contact .map #map-canvas { height: 100%; left: 0; position: absolute !important; top: 0; width: 100%; }   /*=============== Address Boxes ===================*/ .address-boxes { float: left; margin-bottom: -30px; width: 100%; } .add-box { background: #fbfbfb none repeat scroll 0 0; float: left; margin-bottom: 30px; padding: 36px 25px; position: relative; text-align: center; width: 100%; z-index: 1; } .add-box i{ color: #f4f4f4; font-size: 188px; left: 0; position: absolute; top: 50%; width: 100%; z-index: -1; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); } .add-box:hover i{ -webkit-transform:translateY(-50%) scale(0.5); -moz-transform:translateY(-50%) scale(0.5); -ms-transform:translateY(-50%) scale(0.5); -o-transform:translateY(-50%) scale(0.5); transform:translateY(-50%) scale(0.5); } .add-box strong { color: #0e0e0e; float: left; font-size: 20px; font-weight: 800; letter-spacing: 4px; margin-bottom: 5px; width: 100%; } .add-box > span { color: #555555; font-family: 'Poppins'; font-size: 17px; font-weight: 400; letter-spacing: 2px; line-height: 32px; }  /*=============== Contact Info ===================*/ .contact-info { float: left; list-style: outside none none; } .contact-info li { display: table; margin-bottom: 20px; width: 100%; } .contact-info>li>i { display: table-cell; font-size: 36px; vertical-align: top; width: 50px; padding-top:10px; } .contact-info span { display: table-cell; font-family: 'Poppins'; font-size: 15px; font-weight: 400; letter-spacing: 1px; line-height: 25px; vertical-align: top; } @media(min-width : 1200px){ .contact-information .row>.column:last-child{ padding-right: 40px; margin-left: 0; } } /*=============== Projects Page 1 ===================*/ .project-box { float: left; position: relative; width: 100%; } .project-box > img{ width:100% } .project-box-hover { padding: 0 50px; text-align: center; width: 100%; position: absolute; left: 0; top: 50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); } .project-box-hover > h4 { color: #1f1f1f; float: left; font-size: 18px; font-weight: 600; letter-spacing: 1px; margin: 0 0 10px; text-transform: uppercase; width: 100%; opacity:0; -webkit-transform:scale(1.4); -moz-transform:scale(1.4); -ms-transform:scale(1.4); -o-transform:scale(1.4); transform:scale(1.4); -webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1); /* older webkit */ -webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275); -moz-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275); -o-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275); transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); /* older webkit */ -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */ } .project-box-hover > p { color: #656565; float: left; font-size: 14px; line-height:26px; font-weight: 400; margin-bottom: 20px; width: 100%; opacity:0; -webkit-transform:scale(1.4); -moz-transform:scale(1.4); -ms-transform:scale(1.4); -o-transform:scale(1.4); transform:scale(1.4); -webkit-transition: all 700ms cubic-bezier(0.175, 0.885, 0.320, 1); /* older webkit */ -webkit-transition: all 700ms cubic-bezier(0.175, 0.885, 0.320, 1.275); -moz-transition: all 700ms cubic-bezier(0.175, 0.885, 0.320, 1.275); -o-transition: all 700ms cubic-bezier(0.175, 0.885, 0.320, 1.275); transition: all 700ms cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); /* older webkit */ -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */ } .project-box-hover > a { background: black none repeat scroll 0 0; color: #fff; display: inline-block;  font-size: 12px; font-weight: 600; padding: 12px 24px; text-transform: uppercase; opacity:0; -webkit-transform:scale(1.4); -moz-transform:scale(1.4); -ms-transform:scale(1.4); -o-transform:scale(1.4); transform:scale(1.4); -webkit-transition: all 1s cubic-bezier(0.175, 0.885, 0.320, 1); /* older webkit */ -webkit-transition: all 1s cubic-bezier(0.175, 0.885, 0.320, 1.275); -moz-transition: all 1s cubic-bezier(0.175, 0.885, 0.320, 1.275); -o-transition: all 1s cubic-bezier(0.175, 0.885, 0.320, 1.275); transition: all 1s cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); /* older webkit */ -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */ } .project-box:hover .project-box-hover > h4, .project-box:hover .project-box-hover > p, .project-box:hover .project-box-hover > a{ opacity:1; -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1); } .project-box:before{ background: white none repeat scroll 0 0; content: ""; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 100%; } .project-box:hover:before{ opacity:0.7 } /*=============== Single Project Style 1 ===================*/ .single-project { display: table; width: 100%; } .single-project-img { display: table-cell; vertical-align: top; width: 50%; } .single-project-img > img { width: 100%; } .single-project-detail { display: table-cell; padding:0 100px 0 50px; vertical-align: middle; } ul.project-list { float: left; list-style: outside none none; margin: 50px 0 0; padding: 0; width: 100%; } ul.project-list li { float: left; margin-bottom: 6px; width: 100%; } ul.project-list strong { color: #424242; float: left; font-family: 'Poppins'; font-size: 15px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; width: 90px; } ul.project-list span { color: #424242; font-size: 15px; font-weight: 400; letter-spacing: 1px; padding-left: 20px; }  /*=============== Single Project Style 2 ===================*/ .style2 .single-project-detail { padding: 0 50px 0 100px; vertical-align: top; } .detailing-images { display: table; margin: 0 -100px 0 -50px; } .style2 .detailing-images { margin: 0 -50px 50px -100px; } .detailing-images > div { padding: 0 } .detailing-images > div img { width: 100% }  .full-image{ float: left; width:100%; text-align:center; } .full-image img{ max-width:100%; }  /*=============== Single Product Page ===================*/ .single-product-tabs { display: table; padding: 80px; width: 100%; } .single-product-tabs .nav.nav-tabs { border: 0 none; display: table-cell; text-align: center; vertical-align: middle; width: 250px; } .single-product-tabs .nav.nav-tabs li { display: inline-block; float: none; margin: 10px 0; } .single-product-tabs .nav.nav-tabs li a { border: 1px solid #e1e1e1; border-radius: 3px; margin: 0; overflow: hidden; padding: 0; } .single-product-tabs .nav.nav-tabs li a img { width:100% } .single-product-tabs .tab-content { text-align: center } .single-product-tabs .tab-content img { max-width: 100% }  .product-customize-box { background: #fff none repeat scroll 0 0; display: table-cell; padding: 60px 40px; vertical-align: middle; width: 40%; } .product-nav { color: #000; float: left; font-size: 30px; margin-bottom: 20px; text-align: center; width: 30px; } .product-nav.right { float:right } .product-customize-box h2 { float: left; font-size: 30px; font-weight: 600; margin: 20px 0; width: 100%; } .product-customize-box > span { color: #616161; float: left; font-size: 28px; font-weight: 400; width: 100%; } .input-group{ background: #f8f8f8; float: left; margin-bottom: 30px; margin-top: 20px; overflow: hidden; padding-right: 30px; position: relative;  } input::file-selector-button { background: white; color:var(--primaryblue); font-family: inherit; border-radius: 10px; border:none; } /* Change the white to any color */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active{ -webkit-box-shadow: 0 0 0 30px none inset !important; }  /*Change text in autofill textbox*/ input:-webkit-autofill{ -webkit-text-fill-color: var(--primaryblue) !important; } .input-group input { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: 0 none; height: 40px; width: 80px; }  .input-group:before{ background:none repeat scroll 0 0 #d2d0d0; content:""; height:10px; margin-top:-5px; position:absolute; right:30px; top:50%; width:1px; } .input-group span.input-group-btn{ border:0 none; height:50%; width:30px; padding:0; z-index:5; position:absolute; right:1px; top:1px; } .input-group input.form-control{ background:none repeat scroll 0 0 rgba(0, 0, 0, 0); border:0 none; box-shadow:none; color:#6f6f6f; font-family:arimo; font-size:11px; } .input-group span.input-group-btn:last-child{ bottom:1px; top:auto; } .input-group span.input-group-btn button.btn{ background:none; border:0 none; box-shadow:none; border-radius:0; color:rgba(0, 0, 0, 0); float:left; height:100%; margin:0; padding:0; width:100%; z-index:2; } .input-group span.input-group-btn:before{ border-bottom:4px solid #6f6f6f; border-left:4px solid rgba(0, 0, 0, 0); border-right:4px solid rgba(0, 0, 0, 0); bottom:3px; content:""; height:0; left:50%; margin-left:-2px; position:absolute; width:0; z-index:0; } .input-group span.input-group-btn:last-child:before{ border-bottom:0 none; border-top:4px solid #6f6f6f; top:3px; } .theme-overlay-bg ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color:    #9addff; } .theme-overlay-bg :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:    #9addff; opacity:  1; } .theme-overlay-bg ::-moz-placeholder { /* Mozilla Firefox 19+ */ color:    #9addff; opacity:  1; } .theme-overlay-bg :-ms-input-placeholder { /* Internet Explorer 10-11 */ color:    #9addff; } .theme-overlay-bg ::-ms-input-placeholder { /* Microsoft Edge */ color:    #9addff; }  .theme-overlay-bg ::placeholder { /* Most modern browsers support this now. */ color:    #9addff; }  #contactForm input, #contactForm ::placeholder, #contactForm textarea, #contactForm p, #contactForm select, label{ font-size: 18px; } #contactForm .input-lg{ padding: 0px 5px; } #contactForm select{ border: 0; } #contactForm select option { color: #000; } #contactForm select option:first-child{ color: #9addff; }  .product-cats strong { color: #2f2f2f; float: left; font-size: 17px; font-weight: 700; letter-spacing: 2px; margin-right: 10px; text-transform: uppercase; } .product-customize-box .product-cats { margin: 30px 0 0 } .product-customize-box .product-cats a { color: #8d8787; font-size: 14px; margin-left: 5px; margin-top: 3px; text-transform: uppercase; } .product-customize-box .dark-btn { font-size: 15px; letter-spacing: 3px; margin-top: 30px; padding: 15px 40px; }  .single-product-details { float: left; width: 100%; } .single-product-details > h4 { color: #010000; float: left; font-size: 30px; font-weight: 600; letter-spacing: 2px; margin: 0 0 20px; text-transform: uppercase; width: 100%; }  /*=============== Profile Intro ===================*/ .profile-intro { float: left; padding: 100px 0 40px; text-align: center; width: 100%; } .profile-intro h1 { color: #fff; float: left; font-size: 60px; font-weight: 700; line-height: 50px; margin: 0 0 10px; width: 100%; } .profile-intro > span { color: #fff; float: left; font-family: 'Poppins'; font-size: 20px; font-style: italic; font-weight: 800; letter-spacing: 1px; line-height: 23px; margin-bottom: 15px; width: 100%; } .profile-intro > p { color: #d3d3d3; float: left; font-size: 16px; margin-bottom: 30px; width: 100%; }  /*=============== 404 Page ===================*/ .error-text { float: left; width: 100%; } .error-text strong { color: #3f3f3f; float: left; font-family: 'Poppins'; font-size: 40px; font-weight: 800; line-height: 40px; width: 100%; } .error-text strong i { font-size: 80px; margin: 0 10px; } .error-text > p { color: #3f3f3f; float: left; font-size: 15px; font-style: italic; width: 100%; } .error-text > span { float: left;  font-size: 80px; font-weight: 700; line-height: 80px; margin-top: 20px; text-transform: uppercase; width: 100%; } .error-text > span i { font-family: lato; font-style: normal; font-weight: 400; text-transform: capitalize; }  form.search-form { background: #b3b3b3 none repeat scroll 0 0; float: left; height: 50px; margin-top: 30px; position: relative; width: 100%; } form.search-form input { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: 0 none; color: #fff; float: left; height: 100%; padding: 10px 20px; width: 100%; } form.search-form button { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: 0 none; color: #fff; height: 100%; position: absolute; right: 0; width: 50px; } /*=============== Comming Soon Page ===================*/ .comming-soon-page { background: #222 url("../images/resource/parallax31.jpg") no-repeat scroll 0 0 / cover ; float: left; padding: 0 0 100px; width: 100%; } .header { float: left; padding-top: 30px; width: 100%; } .comming-logo { float:left } .info { float: right; margin-top: 25px; } .info span { color: #fff; font-size: 20px; font-weight: 600; margin-left: 30px; } .info span i { margin-right:10px } .launching { float: left; margin-left:35%; margin-top: 90px; width: 65%; } .launching h1 { color: #fff; float: left; font-size: 50px; font-weight: 600; letter-spacing: 1px; line-height: 40px; margin: 0 0 10px; width: 100%; } .launching > span { color: #fff; float: left; font-family: 'Poppins'; font-size: 15px; font-weight: 300; letter-spacing: 0.4px; width: 100%; } .timer { float: left; margin-top: 30px; width: 100%; } .timer ul { float: left; list-style: outside none none; margin: 0; padding: 0 0 50px; position: relative; width: 100%; } .timer ul li { border: 2px solid #919191; border-radius: 50%; float: left; font-size: 20px; height: 135px; line-height: 135px; margin-right: 20px; position: relative; text-align: center; width: 135px; } .timer ul li span { color: #fff;  font-size: 45px; } .timer ul li p { color: #fff;  font-size: 13px; font-weight: 600; left: 0; letter-spacing: 3px; margin-top: 12px; position: absolute; text-align: center; text-transform: uppercase; top: 100%; width: 100%; } .stay { float: left; margin-top: 50px; width: 100%; } .stay strong { color: #fff; float: left; font-size: 20px; font-weight: 800; width: 100%; } .stay .member-social > a { background: #38474f none repeat scroll 0 0; color: #fff; height: 33px; line-height: 33px; width: 33px; }  /*=============== Footer ===================*/  @media(min-width:991px){ .featured-footer{ margin-top: 5rem; } .featured-footer h3{ padding-left:20px; } }  .featured-footer .themed-container{ background: url(../images/resource/narrow-background.svg) top left; background-size: cover; } section.featured-footer:after{ content: ""; background: #1b92d0; width: 50%; height: 100%; display: block; position: absolute; left: 50%; top: 0; z-index: -100; } footer { float: left; width: 100%; } footer .block { padding: 45px 0 } footer.fancy { background:url(../images/resource/parallax8.jpg) no-repeat scroll 0 bottom transparent; position: relative; } footer.fancy:before{ background: #101010 none repeat scroll 0 0; content: ""; height: 100%; left: 0; opacity:0.88; position: absolute; top: 0; width: 100%; } footer.center{ text-align:center } .widget { float: left; width: 100%; position:relative; }  footer.fancy .widget:before, footer.fancy .widget:after { background:#2a292a; content: ""; height: 120px; position: absolute; right: -15px; top: -85px; width: 1px; } footer.fancy .widget:after{ bottom: -85px; top: auto; } footer .thumbnail{ display : none; } @media(min-width : 1400px){ footer .thumbnail{ display : block; width: 20%; float: left; margin-right: 10px; padding : 0; border:0; border-radius: 0; } }  .widget-title { color: #fff; float: left; font-family: 'Poppins'; font-size: 17px; font-weight: 700; letter-spacing: 1px; margin-bottom: 20px; margin-top: 0; width: 100%; } .footer .widget-title{ text-transform: uppercase; } .widget p{ color: #fff; float: left; font-size: 13px; line-height: 28px; margin: 0; width: 100%; } .about-widget { float: left; width: 100%; } .about-widget > ul { float: left; list-style: outside none none; margin: 15px 0 0; padding: 0; width: 100%; } .about-widget li:before{ display:none } .about-widget li { border-bottom: 1px solid #5d5d5d; color: #ffffff; float: left; font-size: 13px; font-weight: 400; line-height: 20px; margin: 0; padding: 12px 0; width: 100%; } footer .about-widget li:first-child{ padding-top:0; } footer .about-widget > ul{ margin-top : 0; } .about-widget li:last-child{ border-bottom: 0; } .about-widget li i { margin-right:10px } .news-widget { float: left; margin-bottom: -20px; width: 100%; } .news { border-bottom: 1px solid #5d5d5d; float: left; margin-bottom: 20px; padding-bottom: 20px; width: 100%; } .news-img { float: left; margin-right: 20px; } .news-detail { overflow: hidden } footer .news-detail > h4{ margin : 0; font-weight : 400; } .news-detail > h4 { color: #fff; float: left; font-family: 'Poppins'; font-size: 13px; font-weight: 700; line-height: 22px; margin: 10px 0; width: 100%; } .news-detail > h4 a { color: inherit } .news-detail > span { color: var(--tertiarycolor); float: left; font-family: 'Poppins'; font-size: 10px; font-weight: 800; letter-spacing: 2px; width: 100%; } .news:last-child{ border:0; padding:0; } .gallery-widget > a { float: left; padding: 2px; width: 50%; position:relative; margin-bottom : 20px; } .gallery-widget > a:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; -webkit-transition:all 0.3s ease 0.2s; -moz-transition:all 0.3s ease 0.2s; -ms-transition:all 0.3s ease 0.2s; -o-transition:all 0.3s ease 0.2s; transition:all 0.3s ease 0.2s; } .gallery-widget > a:hover:before{ opacity:0.2; } .gallery-widget a img { width: 100% } .gallery-widget { margin: 0 -2px } a.small-btn { color: #fff; display: inline-block; float: none; font-family: 'Poppins'; font-size:12px; font-weight: 500; margin-top: 10px; padding: 5px 12px; text-transform: uppercase; width: auto; } .logo-widget { float: left; width: 100%; } .logo-widget > a { display: inline-block; margin-bottom: 20px; } .logo-widget > p { color: #969595; font-family: 'Poppins'; font-size: 14px; margin-bottom: 20px; }  .news-carousel-widget{ float:left; width:100%; } .news-box{ float:left; width:100%; } .news-box img{ width:100% } .news-box h5{ float:left; width:100%; margin:10px 0 5px; color:#FFFFFF; line-height:20px; letter-spacing:0.8px; font-family:'Poppins'; font-weight:700; font-size:13px; color:#e8e8e8; } .news-box h5 a{ color:inherit; } .news-box span{ display:inline-block; font-size:10px; color:#b8b8b8; font-family:'Poppins'; } .owl-dots { float: left; margin-top: 20px; text-align: center; width: 100%; } .owl-dot{ display: inline-block; background: rgba(46,137,200,0.25) none repeat scroll 0 0; border: none; border-radius: 10px; display: inline-block; height: 12px; opacity: 1; margin: 0 5px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; width: 26px; transition: 0.2s; } .owl-dot.active{ background: var(--gradientblue); border: medium none; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; width: 12px; } .address-widget, .phone-widget, .email-widget { float: left; width: 100%; margin-left: 25px; } .widget li .address-widget a{ font-weight : 600; } .email-widget:before, .address-widget:before, .phone-widget:before{ font: normal normal normal 14px / 1 FontAwesome; left: 0; color: var(--lightblue); position: absolute; line-height: 20px; vertical-align: middle; } .address-widget:before{ content:"\f015"; } .phone-widget:before{ content:"\f095"; } .email-widget:before{ content:"\f003"; }  .address-widget > ul { list-style: outside none none; margin: 0; padding: 0; } .address-widget li { color: #969595; font-size: 14px; line-height: 30px; padding: 3px 0; margin:0; } .address-widget li:before{ display:none } .address-widget li span { border: 0 none; color: #e3e3e3; float: none; font-weight: 800; height: auto; width: auto; } .address-widget .member-social > a { background: #545353 none repeat scroll 0 0; color: #fff; } .address-widget .member-social { margin-top:30px }   .bottom-footer { background: #37474f none repeat scroll 0 0; float: left; padding: 10px 0; text-align: center; width: 100%; } .bottom-footer > p { color: #fff; font-family: 'Poppins'; font-size: 12px; font-weight: 600; letter-spacing: 1px; margin: 0; text-align: center; }   /** ISOTOPE STYLING **/ .isotope-item { z-index:2; } .isotope-hidden.isotope-item { pointer-events:none; z-index:1; } .isotope, .isotope .isotope-item { -webkit-transition-duration:0.8s; -moz-transition-duration:0.8s; -ms-transition-duration:0.8s; -o-transition-duration:0.8s; transition-duration:0.8s; } .isotope { -webkit-transition-property:height, width; -moz-transition-property:height, width; -ms-transition-property:height, width; -o-transition-property:height, width; transition-property:height, width; } .isotope .isotope-item { -webkit-transition-property:-webkit-transform, opacity; -moz-transition-property:   -moz-transform, opacity; -ms-transition-property:    -ms-transform, opacity; -o-transition-property:     -o-transform, opacity; transition-property:        transform, opacity; } .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration:0s; -moz-transition-duration:0s; -ms-transition-duration:0s; -o-transition-duration:0s; transition-duration:0s; } /* =============================================================== OWL CAROUSEL STYLING ================================================================*/ .owl-carousel .animated{ -webkit-animation-duration:1000ms; animation-duration:1000ms; -webkit-animation-fill-mode:both; animation-fill-mode:both; } .owl-carousel .owl-animated-in{ z-index:0; } .owl-carousel .owl-animated-out{ z-index:1; } .owl-carousel .fadeOut{ -webkit-animation-name:fadeOut; animation-name:fadeOut; } @-webkit-keyframes fadeOut{ 0%{ opacity:1; } 100%{ opacity:0; } } @keyframes fadeOut{ 0%{ opacity:1; } 100%{ opacity:0; } }/* *   Owl Carousel - Auto Height Plugin*/ .owl-height{ -webkit-transition:height 500ms ease-in-out; -moz-transition:height 500ms ease-in-out; -ms-transition:height 500ms ease-in-out; -o-transition:height 500ms ease-in-out; transition:height 500ms ease-in-out; }/* *  Core Owl Carousel CSS File*/ .owl-carousel{ display:none; -webkit-tap-highlight-color:transparent;/* position relative and z-index fix webkit rendering fonts issue */ position:relative; z-index:1; margin-top: 80px; } .timeline-carousel.owl-carousel{ margin-top: 0; padding: 0 20px; } .owl-carousel .owl-stage{ position:relative; -ms-touch-action:pan-Y; } .owl-carousel .owl-stage:after{ content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0; } .owl-carousel .owl-stage-outer{ position:relative; overflow:hidden;/* fix for flashing background */ -webkit-transform:translate3d(0px, 0px, 0px); width:100%; } .owl-carousel .owl-controls .owl-nav .owl-prev,.owl-carousel .owl-controls .owl-nav .owl-next,.owl-carousel .owl-controls .owl-dot{ cursor:pointer; cursor:hand; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; color:transparent; } .owl-carousel.owl-loaded{ display:block; } .owl-carousel.owl-loading{ opacity:0; display:block; } .owl-carousel.owl-hidden{ opacity:0; } .owl-carousel .owl-refresh .owl-item{ display:none; } .owl-carousel .owl-item{ position:relative; min-height:1px; float:left; -webkit-backface-visibility:hidden; -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } .owl-carousel .owl-item img{ -webkit-transform-style:preserve-3d; } .owl-carousel.owl-text-select-on .owl-item{ -webkit-user-select:auto; -moz-user-select:auto; -ms-user-select:auto; user-select:auto; } .owl-carousel .owl-grab{ cursor:move; cursor:-webkit-grab; cursor:-o-grab; cursor:-ms-grab; cursor:grab; } .owl-carousel.owl-rtl{ direction:rtl; } .owl-carousel.owl-rtl .owl-item{ float:right; }/* No Js */ .no-js .owl-carousel{ display:block; }/* *    Owl Carousel - Lazy Load Plugin*/ .owl-carousel .owl-item .owl-lazy{ opacity:0; -webkit-transition:opacity 200ms ease; -moz-transition:opacity 200ms ease; -ms-transition:opacity 200ms ease; -o-transition:opacity 200ms ease; transition:opacity 200ms ease; } .owl-carousel .owl-item img{ transform-style:preserve-3d; }/* *  Owl Carousel - Video Plugin*/ .owl-carousel .owl-video-wrapper{ position:relative; height:100%; background:#000; } .owl-carousel .owl-video-play-icon{ position:absolute; height:80px; width:80px; left:50%; top:50%; margin-left:-40px; margin-top:-40px; background:url("owl.video.play.png") no-repeat; cursor:pointer; z-index:1; -webkit-backface-visibility:hidden; -webkit-transition:scale 100ms ease; -moz-transition:scale 100ms ease; -ms-transition:scale 100ms ease; -o-transition:scale 100ms ease; transition:scale 100ms ease; } .owl-carousel .owl-video-play-icon:hover{ -webkit-transition:scale(1.3, 1.3); -moz-transition:scale(1.3, 1.3); -ms-transition:scale(1.3, 1.3); -o-transition:scale(1.3, 1.3); transition:scale(1.3, 1.3); } .owl-carousel .owl-video-playing .owl-video-tn,.owl-carousel .owl-video-playing .owl-video-play-icon{ display:none; } .owl-carousel .owl-video-tn{ opacity:0; height:100%; background-position:center center; background-repeat:no-repeat; -webkit-background-size:contain; -moz-background-size:contain; -o-background-size:contain; background-size:contain; -webkit-transition:opacity 200ms ease; -moz-transition:opacity 200ms ease; -ms-transition:opacity 200ms ease; -o-transition:opacity 200ms ease; transition:opacity 200ms ease; } .owl-carousel .owl-video-frame{ position:relative; z-index:1; }  /*======================================================================= [04] SECTION SETUP =========================================================================*/  h1, h2, h3, h4, h5, h6{ font-family: 'Poppins'; } h1 span, h2 span, h3 span, h4 span, h5 span, h6 span{ color: var(--tertiarycolor); } .bg-dark-grey h1 span, .bg-dark-grey h2 span, .bg-dark-grey h3 span, .bg-dark-grey h4 span, .bg-dark-grey h5 span, .bg-dark-grey h6 span{ color: var(--lightblue); } .color_white{ color: #fff; } .color_yellow{ color: #fedd00 } .theme-color-1{ color: var(--primaryblue); } .theme-color-2{ color: var(--secondaryblue); } .theme-color-3{ color: #595959; } .theme-color-4{ color: #4a4a4a; } .theme-color-red{ color: var(--red); } h1.lead{ font-size: 160px; letter-spacing: 0; line-height: 180px; font-weight: 700; } h2.lead{ font-size: 6rem; letter-spacing: 0.0125rem; line-height: 7rem; font-weight: 700; } h3.lead{ font-size: 3rem; letter-spacing: 0; line-height: 4rem; } h4.lead{ font-size: 2.75rem; letter-spacing: 0; line-height: 3.85rem; } h5.lead{ font-size: 34px; letter-spacing: 0; line-height: 40px; } h6.lead{ font-size: 20px; letter-spacing: 8px; line-height: 36px; }  h1{ font-size: 30px; line-height: 50px; } h2{ font-size: 26px; letter-spacing: 0; line-height: 36px; } h3{ font-size: 18px; letter-spacing: 0; line-height: 30px; } h4{ font-size: 20px; letter-spacing: 0; line-height: 34px; } h5{ font-size: 16px; letter-spacing: 6.4px; line-height: 20px; } h6{ font-size: 14px; letter-spacing: 5.6px; line-height: 28px; } .sectionTitle { margin-bottom: 33px; } .sectionTitle h5{ margin-bottom: 20px; } .margin-bottom-0{ margin-bottom: 0; } .margin-bottom-1{ margin-bottom: 60px; } .margin-bottom-2{ margin-bottom: 30px; } .margin-bottom-3{ margin-bottom: 20px; } .margin-bottom-4{ margin-bottom: 10px; } .margin-top-large{ margin-top:30em; } .margin-top-1{ margin-top: 120px; } .margin-top-2{ margin-top: 30px; } .margin-top-3{ margin-top: 20px; } .margin-top-4{ margin-top: 10px; } .padding-bottom-1{ padding-bottom: 60px; } .padding-bottom-2{ padding-bottom: 30px; } .padding-bottom-3{ padding-bottom: 20px; } .padding-bottom-4{ padding-bottom: 10px; } .padding-top-large{ padding-top:30em; } .padding-top-1{ padding-top: 120px; } .padding-top-2{ padding-top: 30px; } .padding-top-3{ padding-top: 20px; } .padding-top-4{ padding-top: 10px; } @media(min-width : 1360px){ h2.lead{ font-size: 4em; line-height: 1.15; font-weight: 600; } .bg-dark-grey.theme-bordered-bottom:not(.col-md-12), .bg-dark-grey.theme-bordered-bottom .about-detail, .bg-lightest-blue.theme-bordered-bottom:not(.col-md-12), .bg-lightest-blue.theme-bordered-bottom .about-detail{ border-bottom-left-radius: 25px; } } @media(min-width : 1280px) and (max-width : 1359){ h2.lead{ font-size: 3em; line-height: 1.15; font-weight: 600; } .bg-dark-grey.theme-bordered-bottom:not(.col-md-12), .bg-dark-grey.theme-bordered-bottom .about-detail, .bg-lightest-blue.theme-bordered-bottom:not(.col-md-12), .bg-lightest-blue.theme-bordered-bottom .about-detail{ border-bottom-left-radius: 25px; } } @media(max-width : 1279px){ .bg-dark-grey.theme-bordered-bottom, .bg-dark-grey.theme-bordered-bottom .about-detail{ border-bottom-left-radius: 20px; } h2.lead { font-size: 30px; line-height: 38px; font-weight: 600; } } @media(min-width:768px) and (max-width: 990px){ .sectionTitle p{ padding: 0; } #practices{ padding-top: 60px; padding-bottom: 60px; } }  @media(min-width: 320px) and (max-width: 767px){  #practices{ padding-top: 15px; padding-bottom: 15px; } .sectionTitle h2.lead { font-size: 25px; line-height: 35px; } .sectionTitle p{ padding: 0; } .sectionTitle{ text-align: center; } .sectionTitle h3.lead{ font-size: 20px; line-height: 30px; } } .singleService a.learn:hover{ color: var(--tertiarycolor); }  /*======================================================================= [04] TEAM =========================================================================*/  .pr200{ padding-right: 200px; } .pl2rem{ padding-left: 2rem; } .teamBig img{ width: 100%; } .singleTestm p{ font-size: 2.95em; color: #000000; font-weight: 300; line-height: 1.5em; margin-bottom:21px; } .teamDeg h4.magenta{ color: var(--tertiarycolor); } .teamTop{ margin-bottom: 133px; } .testmonial { margin-top: 15%; position: relative; } .singleTeam{ text-align: center; } .singleTeam img{ width: 100%; height: auto; margin-bottom: 21px; } .teamDeg{ } .teamDeg h4{ color: #000; margin: 0 0 4px; } .teamDeg p{ color: #000000; font-size: 16px; font-weight: 400; line-height: .8; margin: 0; }   /*======================================================================= [06] OUR WORK =========================================================================*/  .singleWorkContent{ text-align: center; position: absolute; top: 49.5%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); visibility: hidden; opacity: 0; left: 0; right: 0; max-width: 95%; margin: 0 auto; } .singleWorkContent h6{ margin-bottom: 30px; } .singleWorkContent h2{ margin-bottom: 18px; } .singleWork.slick-slide:not(.slick-active) { opacity: 0.45; filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */ filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */ } .workTag{ line-height: 1.5; margin-bottom: 41px; } .workTag a{ margin-left: 2px; margin-right: 10px; } .workTag a, .workTag{ font-size: 14px; text-transform: uppercase; letter-spacing: 5.6px; color: #ffffff; font-weight: 700; } .workTag a:hover{ color: var(--tertiarycolor); } .work_btn { background: #000000; border-radius: 2rem 0.9rem; color: #fff; height: 50px; padding: 0 29px; line-height: 50px; display: inline-block; font-size: 21px; font-weight: 400; } .work_btn:hover{ background: var(--tertiarycolor); color: #fff; } .singleWork{ margin: 0 20px; } .singleWork img{ width: 100%; height: auto; } .singleWork.slick-active.slick-center .singleWorkContent{ visibility: visible; opacity: 1; } .singleWork.slick-active.slick-center{ position: relative; } .singleWork.slick-active.slick-center:before{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .3); content: ''; } #workCarousel .slick-prev, #workCarousel .slick-next { cursor: pointer; height: 10rem; margin-top: 0px; position: absolute; top: calc(50% - 5rem); width: 10rem; z-index: 9; text-align: center; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } #workCarousel .slick-arrow::before { font-size: 10rem; line-height: 9rem; } #workCarousel .slick-prev i, #workCarousel .slick-next i{ line-height: 60px; font-size: 28px; color: #fff; } #workCarousel .slick-prev i{ left: -1px; position: relative; } #workCarousel .slick-prev{ left: 157px; } #workCarousel .slick-next{ right: 157px; } .slick-dots{ margin-top:20px; text-align: center; padding-left: 0px; } .slick-dots button { display: none; } .slick-dots li{ display: inline-block; background: rgba(46,137,200,0.25) none repeat scroll 0 0; border-radius: 10px; display: inline-block; height: 12px; opacity: 1; margin: 0 3px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; width: 26px; transition: 0.2s; } .slick-dots li.slick-active{ background : var(--gradientblue); border: medium none; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; width: 12px; } .singleWorkContent{ } .singleWorkContent h2 { color: #fff; font-weight: 600 !important; margin-bottom: 14px; margin-bottom: 31px; }  .mlr0{ margin-right: 0 !important; margin-left: 0 !important; } .plr0{ padding-right: 0 !important; padding-left: 0 !important; }  section.section-sustainable{ background: url(../images/home/sustainability/green.png) no-repeat; background-size: contain; background-position: bottom; height: 100%; }  /*mask text style*/  .maskText{ font-size: 45px; line-height: 65px; letter-spacing: -0.02em; color: #1d1d1f; text-align: left;  }  .maskContent { height: 70px; position: relative; overflow: hidden; margin-top: var(--offset); }  .maskContent span { display: block; box-sizing: border-box; position: absolute; top: 65px; padding-bottom: var(--offset); background-size: 100% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-repeat: no-repeat; }  .maskContent span[data-show] { transform: translateY(-100%); transition: .5s transform ease-in-out; }  .maskContent span[data-up] { transform: translateY(-200%); transition: .5s transform ease-in-out; }  .maskContent span:nth-child(1) { background-image: linear-gradient(45deg, var(--green) 50%, #215f06); }  .maskContent span:nth-child(2) { background-image: linear-gradient(45deg, var(--green) 50%, #215f06); }  .maskContent span:nth-child(3) { background-image: linear-gradient(45deg, var(--green) 50%, #215f06); }  .maskContent span:nth-child(4) { background-image: linear-gradient(45deg, var(--green) 50%, #215f06); }  @media(min-width:1281px){ .maskText span{ font-size: 4.5vmin; } .testmonial { margin-left: 120px; } .style2 .full-product-text h4{ font-size: 1.485rem; letter-spacing: 0.0125rem; line-height: 1.85rem; font-weight: 400; } .detail-box.vision-box { margin-top : 15rem; } }  @media(max-width : 1280px){ .themed-header{ width: 95%; padding: 2rem 1.5rem; position: relative; background: none; transform: none; } .themed-header ul{ display: none; } .page-top h1{ font-size : 3rem; line-height : 4rem; color : #fff !important; } .page-top.extra-gap{ padding: 80px 0; } .full-product-text > p, .main-timeline .description, h3{ font-size: 16px; line-height: 25px; } h3.lead{ font-size: 2.25rem; letter-spacing: 0; line-height: 3rem; } h5.lead { font-size: 34px; letter-spacing: 0; line-height: 40px; } h5.lead { font-size: 26px; letter-spacing: 0; line-height: 34px; text-transform: capitalize; } h4 { font-size: 14px; letter-spacing: 0; line-height: 24px; } h4.lead { font-size: 30px; letter-spacing: 0; line-height: 45px; margin: 10px 0; } .style2 .full-product-text { padding: 25px 15px; } .style2 .full-product-text h4{ font-size: 1.285rem; letter-spacing: 0.0125rem; line-height: 1.85rem; font-weight: 400; } .margin-top-1 { margin-top: 60px; } .sectionTitle{ margin-top : 20px; } .comparisonSection .color-titles { transform: translate(-50%, 75px); } .maskText { font-size: 22px; line-height: 30px; letter-spacing: -0.02em; color: #1d1d1f; text-align: left; } .maskContent{ height : 30px; margin-top : var(--offset-2); } .maskContent span{ top : 72px; }  .coloured-btn{ background: linear-gradient(to right, rgb(40,147,206), rgba(255,0,0,0) 100%), linear-gradient(to right, rgb(40,147,206), rgba(0,255,0,0) 100%), linear-gradient(to right, rgb(3,34,172), rgb(0,0,255) 100%); background:-webkit-linear-gradient(90deg, rgb(55 114 213), rgb(31, 137, 201) 100%), -webkit-linear-gradient(100deg, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), -webkit-linear-gradient(260deg, rgb(40, 147, 206), rgb(0, 0, 206) 100%); background: -moz-linear-gradient(90deg, rgb(55 114 213), rgb(31, 137, 201) 100%), -moz-linear-gradient(100deg, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), -moz-linear-gradient(260deg, rgb(40, 147, 206), rgb(0,0,206) 100%); background: -o-linear-gradient(90deg, rgb(55 114 213), rgb(31, 137, 201) 100%), -o-linear-gradient(100deg, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), -o-linear-gradient(260deg, rgb(40, 147, 206), rgb(0,0,206) 100%); background: -ms-linear-gradient(90deg, rgb(55 114 213), rgb(31, 137, 201) 100%), -ms-linear-gradient(100deg, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), -ms-linear-gradient(260deg, rgb(40, 147, 206), rgb(0,0,206) 100%); border: 1px solid #fff; color: white; border-radius: 1.5rem 0.5rem; transition: background-color 300ms ease; height: 40px; display: inline-block; padding: 0 30px; color: #fff; text-transform: uppercase; font-size: 12px; font-weight: 600; letter-spacing: 1px; line-height: 38px; margin: 20px 0; } ul.bulletpoints li{ font-size: 14px; line-height: 24px; } .detail-box { margin-bottom: 0px; padding: 35px 20px; } .detail-box.vision-box { margin-top: 20px; } .block{ padding: 40px 0; } .owl-nav > div:before { font-size: 25px; line-height: 40px; } .featured-footer{ background: var(--primaryblue); } .featured-footer .themed-container .column{ margin-bottom: 0px; } } /*options for banner begins */  #myTabContent #tab2 .creative-tab-content { float: left; position: relative; width: 100%; height: 100vh; background: #180e49; overflow: hidden; }  #tab2 .creative-tab-content:before { content: ""; width: 110vh; height: 110vh; position: absolute; background: #1c2d5e; border-radius: 100%; bottom: -45%; left: -15%; z-index: 0; }  #tab2 .caption-title { position: absolute; bottom: 2.25em; color: #fff; right: 2.25em; font-size: 4.25em; z-index: 9; }  #tab2 .caption-title span { background: var(--primaryblue); padding: 10px 20px; border-radius: 10px; }  #tab2 .creative-tab-content > .banner-img { width: 86vw; border-radius: 36px; right: 2em; top: 10em; border-top-left-radius: 400px; position: absolute; height: 85%; background: url(../images/home/prefabrication.jpg) no-repeat; z-index: 1; background-size: cover; background-position: center center; }  /*horizontal timeline begins*/  .timeline-container .owl-carousel .owl-item img{ width:100%; } /*.timeline-container .owl-item:nth-child(odd) .content{ background: #f5f5f5; } .timeline-container .owl-item:nth-child(even) .content{ background: #d7f4ff; }*/ .timeline-container .content{ position: relative; font-size: 1.5em; line-height: 24px; padding: 10px 10px; border-radius: 4px; box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.3); margin-top:50px; } .timeline-container .owl-item:nth-child(odd) .content{ background: #d8eeff; } .timeline-container .owl-item:nth-child(even) .content{ background: #ebf9ff; }  .timeline-container .slot{ padding:0 10px; padding-bottom: 27px; border-bottom: 3px solid var(--secondaryblue); } .timeline-container .owl-item:not(:last-child) .content::before { content: "\f105"; font-family: "fontawesome"; background: var(--primaryblue); width: 20px; height: 20px; position: absolute; top: -30px; left: 100%; transform: translateX(-50%); z-index: 1; border-radius: 50%; color: #fff; text-align : center; font-size:18px; line-height:20px; } .timeline-container .owl-item .content::after { content: ""; background: transparent; width: 1px; height: 50px; position: absolute; top: -50px; left: 50%; transform: translateX(-50%); z-index: -1; border: 1px dashed var(--tertiarycolor); } .timeline-carousel.owl-carousel .owl-item img{ transform-style: inherit; } .timeline-carousel .year { font-size: 3em; padding: 20px 0px 5px 10px; color: #000; } .timeline-carousel.owl-carousel .owl-item{ background : transparent; padding-bottom: 30px; border-radius: 20px; } .timeline-container .owl-item:hover .content::before{ opacity: 0; } .timeline-container .owl-item:hover .slot{ border-bottom: 3px solid #fff; } .timeline-carousel.owl-carousel .owl-item:hover{ background: linear-gradient(100deg, #0a53b0, #1b91cf  100%), linear-gradient(178deg, #182891, #1076bf 100%), linear-gradient(360deg, #1184c9, #0691cb 100%); background: -webkit-linear-gradient(100deg, #0a53b0, #1b91cf  100%), -webkit-linear-gradient(178deg, #182891, #1076bf 100%), -webkit-linear-gradient(360deg, #1184c9, #0691cb 100%); background: -moz-linear-gradient(100deg, #0a53b0, #1b91cf  100%), -moz-linear-gradient(178deg, #182891, #1076bf 100%), -moz-linear-gradient(360deg, #1184c9, #0691cb 100%); background: -o-linear-gradient(100deg, #0a53b0, #1b91cf  100%), -o-linear-gradient(178deg, #182891, #1076bf 100%), -o-linear-gradient(360deg, #1184c9, #0691cb 100%); background: -ms-linear-gradient(100deg, #0a53b0, #1b91cf  100%), -ms-linear-gradient(178deg, #182891, #1076bf 100%), -ms-linear-gradient(360deg, #1184c9, #0691cb 100%); transition: all.5s ease-in-out; } .timeline-carousel .year h4{ color: var(--primaryblue); font-weight: 700; margin-bottom:2px; } .timeline-carousel.owl-carousel .owl-item:hover .year h4{ color: #fff; font-weight: 700; } .timeline-carousel.owl-carousel .owl-item:hover .content{ box-shadow: none; background : none; } .timeline-carousel.owl-carousel .owl-item:hover .content h4, .timeline-carousel.owl-carousel .owl-item:hover .content p{ color : #fff; } .timeline-container .content p { font-size: 1.5rem; line-height: 2rem; letter-spacing: 0.025rem; } .timeline-carousel .owl-nav { height: 0; left: 0; padding: 0 20px; position: absolute; top: 50%; width: 100%; } .timeline-carousel .owl-nav .owl-next, .timeline-carousel .owl-nav .owl-prev{ height: 54px; width: 54px; } .timeline-carousel .owl-nav .owl-next { float: right; } .timeline-carousel .owl-nav > div { float: left; margin-top: -27px; position: relative; } .timeline-carousel .owl-nav > div:before { content: "\f104"; font-family: fontawesome; font-size: 25px; line-height: 50px; position: absolute; text-align: center; width: 100%; height:100%; } .timeline-carousel .owl-nav > div.owl-next:before { content:"\f105" } .timeline-carousel .owl-nav > div { border: 0 none; margin-top: -18px; -webkit-border-radius:0; -moz-border-radius:0; -ms-border-radius:0; -o-border-radius:0; border-radius:0; } .timeline-carousel .owl-nav { padding:0 } .timeline-carousel .owl-nav > div.owl-next { margin-left: 0; margin-right: -50px; } .timeline-carousel .owl-nav .owl-prev { float: left; height: 54px; width: 54px; margin-left : -50px; }  @media(max-width : 1280px){ .timeline-container .content p { font-size: 1.15rem; line-height: 1.65rem; letter-spacing: 0.025rem; } } @media(max-width : 980px){ .timeline-carousel .owl-dots{ display : none !important; } } @media(max-width : 979px){ .timeline-carousel .owl-nav > div.owl-next { margin-right: -10px; } .timeline-carousel .owl-nav > div.owl-prev { margin-left: -10px; } .timeline-carousel .owl-nav > div:before{ line-height:30px; } .timeline-carousel .owl-nav .owl-next, .timeline-carousel .owl-nav .owl-prev{ height:30px; width:30px; } } @media(max-width : 786px){ .parallax, .fixed-bg{ min-height: 280px; } } .timeline-container .content h4 { font-size: 2.25rem; line-height: 3rem; font-weight: 500; letter-spacing: 0.025rem; }  /*horizontal timeline ends*/  .theme-bg{ background: linear-gradient(to right, rgb(40,147,206), rgba(255,0,0,0) 100%), linear-gradient(to right, rgb(40,147,206), rgba(0,255,0,0) 100%), linear-gradient(to right, rgb(3,34,172), rgb(0,0,255) 100%); background:-webkit-linear-gradient(90deg, rgb(8 71 177), rgb(31, 137, 201) 100%), -webkit-linear-gradient(100deg, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), -webkit-linear-gradient(260deg, rgb(40, 147, 206), rgb(0,0,206) 100%); background: -moz-linear-gradient(90deg, rgb(8 71 177), rgb(31, 137, 201) 100%), -moz-linear-gradient(100deg, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), -moz-linear-gradient(260deg, rgb(40, 147, 206), rgb(0,0,206) 100%); background: -o-linear-gradient(90deg, rgb(8 71 177), rgb(31, 137, 201) 100%), -o-linear-gradient(100deg, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), -o-linear-gradient(260deg, rgb(40, 147, 206), rgb(0,0,206) 100%); background: -ms-linear-gradient(90deg, rgb(8 71 177), rgb(31, 137, 201) 100%), -ms-linear-gradient(100deg, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), -ms-linear-gradient(260deg, rgb(40, 147, 206), rgb(0,0,206) 100%); } .theme-overlay-bg:before{ background: linear-gradient(to right, rgb(40,147,206), rgba(255,0,0,0) 100%), linear-gradient(to right, rgb(40,147,206), rgba(0,255,0,0) 100%), linear-gradient(to right, rgb(3,34,172), rgb(0,0,255) 100%); background: -webkit-linear-gradient(100deg, rgb(3,34,172), rgb(31,137,201) 100%), -webkit-linear-gradient(100deg, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), -webkit-linear-gradient(360deg, rgb(40,147,206), rgb(0,0,255) 100%); background: -moz-linear-gradient(90deg, rgb(8 71 177), rgb(31, 137, 201) 100%), -moz-linear-gradient(100deg, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), -moz-linear-gradient(260deg, rgb(40, 147, 206), rgb(0,0,206) 100%); background: -o-linear-gradient(90deg, rgb(8 71 177), rgb(31, 137, 201) 100%), -o-linear-gradient(100deg, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), -o-linear-gradient(260deg, rgb(40, 147, 206), rgb(0,0,206) 100%); background: -ms-linear-gradient(90deg, rgb(8 71 177), rgb(31, 137, 201) 100%), -ms-linear-gradient(100deg, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), -ms-linear-gradient(260deg, rgb(40, 147, 206), rgb(0,0,206) 100%); content: ""; height: 100%; left: 0; opacity: 0.85; position: absolute; z-index: 0; top: 0; width: 100%; } .theme-overlay-bg-red:before{ background: rgba(189, 7, 7, 0.85); content: ""; height: 100%; left: 0; opacity: 0.95; position: absolute; z-index: 0; top: 0; width: 100%; } .theme-overlay-bg .transparent-form *{ color : #99d8ff; background : transparent; } .bg-white{ background : #fff; } .bg-white-transparent{ background : rgba(255,255,255,0.95); } .dark-red{ background : rgba(189, 7, 7, 0.85); } .bg-dark-green{ background : rgba(9,62,4,0.95); } .bg-dark-green h2{ font-size: 45px; } .bg-dark-green h2,.bg-dark-green h3{ color : #b2e3bc; } .bg-dark-green p{ color : #fff; } .bg-primary-blue{ background: var(--primaryblue); } .bg-primary-blue-transparent{ background: var(--primarybluetransparent); } .bg-secondary-blue{ background: var(--secondaryblue); } .bg-light-grey{ background: var(--lightgrey); } .bg-dark-grey{ background: var(--darkgrey); } .bg-dark-grey p{ color: var(--white); } .bg-dark-blue{ background: var(--darkblue); } .theme-bg-yellow{ background : var(--tertiarycolor); } .theme-bg-light-blue{ background : #d7f4ff; } .theme-bg-1{ background : #255ec0; } .theme-bg-2{ background: var(--secondaryblue) none repeat scroll 0 0; } .theme-bg-3{ background: #002a90 none repeat scroll 0 0; } /*.et-main{display : none;}*/ @media only screen and (min-width: 1200px){ .et_pb_section { padding: 120px 0; } .et_pb_section.et_pb_section_2 { background-size: contain; background-position: left top; background-image: url(https://protodesign.nl/wp-content/uploads/2022/06/robotics-12.png)!important; background-repeat: no-repeat; } .et_pb_section_2 { /*min-height: 930px;*/ margin-left: auto!important; margin-right: auto !important; } }  .et_pb_section_2:after { content: "" !important; width: 100%; height: 100%; position: absolute; left: 100%; top: 0; background: #d7f4ff; z-index: 0; display: inline-block !important; }  @media only screen and (min-width:767px){  .et_pb_section_2.et_pb_section { padding: 5vw 0vw 5vw 8vw; background-color: #d7f4ff !important; text-align: center; } } @media(max-width:766px){ .et_pb_section_2.et_pb_section { background-color: #d7f4ff !important; padding : 20px; } .download-social *{ text-align: center; } .download-social{ padding:0; } }  /*NEXT PREV START*/ .nexprevPagination{ padding-left: 90px; padding-right: 90px; padding-bottom: 65px; } .paginationnp{ padding-left: 229px; position: relative; min-height: 120px; text-align: left; padding-top: 20px; } .paginationnp img{ position: absolute; left: 0; top: 0; width: 200px; height: 120px; } .paginationnp.right{ padding-left: 0; padding-right: 229px; text-align: right; border-left: 1px solid #e9e9e9; } .paginationnp.right img{ left: auto; top: 0; right: 0; } .paginationnp h6 { line-height: 0.8; margin: 0 0 14px; } .paginationnp h6 a{ text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: 4.8px; } .paginationnp h6 a:hover{ color: var(--primaryblue); } .paginationnp h1{ letter-spacing: 0; line-height: 1.2; margin: 0; } @media(min-width: 991px) and (max-width: 1280px){ .nexprevPagination{ padding-left: 50px; padding-right: 50px; } .timeline-container .content h4 { font-size: 1.75rem; line-height: 2.5rem; font-weight: 500; letter-spacing: 0.025rem; } } @media(min-width:768px) and (max-width: 990px){ .nexprevPagination{ padding: 0; } .paginationnp{ padding-left: 15px; } .paginationnp img{ position: relative; margin-bottom: 15px; } .paginationnp.right{ padding-right: 15px; margin-top: 30px; } .timeline-container .content h4 { font-size: 1.75rem; line-height: 2.5rem; font-weight: 500; letter-spacing: 0.025rem; } } @media(min-width: 320px) and (max-width: 767px){  .nexprevPagination{ padding: 0; } .paginationnp{ padding-left: 15px; } .paginationnp img{ position: relative; margin-bottom: 15px; } .paginationnp.right{ padding-right: 15px; margin-top: 30px; } .timeline-container .content h4 { font-size: 1.75rem; line-height: 2.5rem; font-weight: 500; letter-spacing: 0.025rem; } }  /*NEXT PREV END*/   .poptrox-popup{ background: rgba(0, 0, 0, 0.28) !important; color: #fff !important; }  @-webkit-keyframes slow { 0% { opacity: 0; } 100% { opacity: 1 } }  .poptrox-popup .pic img{ /*    transition: all  ease-in-out; transition-delay: 500ms; */  -webkit-animation-name: slow; -webkit-animation-duration: 500ms; -webkit-animation-fill-mode: forwards; -webkit-animation-timing-function: ease-out; } /*scroll back to top*/ a.coloured-btn.op-0, a.coloured-btn.op-0:hover{ opacity: 0 !important; pointer-events: none; } .back-to-top { position: fixed; right: 1%; bottom: -7.5%; height: 40px; width: 40px; padding: 3px 5px; font-weight: bold; z-index: 9; visibility: hidden; text-align: center; text-decoration: none; text-transform: uppercase; transition: all 0.25s ease-in-out; background: linear-gradient(to right, rgb(40,147,206), rgba(255,0,0,0) 100%), linear-gradient(to right, rgb(40,147,206), rgba(0,255,0,0) 100%), linear-gradient(to right, rgb(3,34,172), rgb(0,0,255) 100%); background:-webkit-linear-gradient(90deg, rgb(8 71 177), rgb(31, 137, 201) 100%), -webkit-linear-gradient(100deg, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), -webkit-linear-gradient(260deg, rgb(40, 147, 206), rgb(0,0,206) 100%); background: -moz-linear-gradient(90deg, rgb(8 71 177), rgb(31, 137, 201) 100%), -moz-linear-gradient(100deg, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), -moz-linear-gradient(260deg, rgb(40, 147, 206), rgb(0,0,206) 100%); background: -o-linear-gradient(90deg, rgb(8 71 177), rgb(31, 137, 201) 100%), -o-linear-gradient(100deg, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), -o-linear-gradient(260deg, rgb(40, 147, 206), rgb(0,0,206) 100%); background: -ms-linear-gradient(90deg, rgb(8 71 177), rgb(31, 137, 201) 100%), -ms-linear-gradient(100deg, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), -ms-linear-gradient(260deg, rgb(40, 147, 206), rgb(0,0,206) 100%); } .back-to-top:hover, .back-to-top:focus { opacity: 1; text-decoration: none; } .back-to-top:focus { outline: thin dotted; } .back-to-top i{ font-size: 3rem; color: #fff; } .back-to-top:hover, .back-to-top:focus { height: 60px; }  .show-back-to-top { display: block; bottom: 1.25%; visibility: visible; }  /*scroll back to top ends*/   /*Related Projects*/  #related-projects .member p{ margin-top: 10px; font-weight: 500; text-align: left; }  /*Related Projects ends*/  @layer utils { .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } } @layer toggle { .plan-toggle { box-sizing: border-box; display: grid; grid-template-columns: 1fr 1fr; border-radius: 100px; border: 4px solid transparent; background: var(--lightestblue); position: relative; transition: background 0.25s; clip-path: inset(0 0 0 0 round 100px); font-size: 18px; }  input:focus-visible ~ .indicator { outline: 2px solid red; outline-offset: 2px; font-weight: 700; }  .plan-toggle label { text-align: center; padding: 1.5rem 2rem; cursor: pointer; border-radius: 100px; height: 100%; line-height: 1; vertical-align: middle; margin-bottom:0 !important; } .plan-toggle i{ margin-right: 10px; } .plan-toggle:hover { background: var(--lightestblue); }  .plan-toggle__indicator { position: absolute; background: linear-gradient(to right, rgb(40, 147, 206), rgba(255, 0, 0, 0) 100%), linear-gradient(to right, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), linear-gradient(to right, rgb(3, 34, 172), rgb(0, 0, 255) 100%); background: -webkit-linear-gradient(90deg, rgb(55 114 213), rgb(31, 137, 201) 100%), -webkit-linear-gradient(100deg, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), -webkit-linear-gradient(260deg, rgb(40, 147, 206), rgb(0, 0, 206) 100%); background: -moz-linear-gradient(90deg, rgb(55 114 213), rgb(31, 137, 201) 100%), -moz-linear-gradient(100deg, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), -moz-linear-gradient(260deg, rgb(40, 147, 206), rgb(0, 0, 206) 100%); background: -o-linear-gradient(90deg, rgb(55 114 213), rgb(31, 137, 201) 100%), -o-linear-gradient(100deg, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), -o-linear-gradient(260deg, rgb(40, 147, 206), rgb(0, 0, 206) 100%); background: -ms-linear-gradient(90deg, rgb(55 114 213), rgb(31, 137, 201) 100%), -ms-linear-gradient(100deg, rgb(40, 147, 206), rgba(0, 255, 0, 0) 100%), -ms-linear-gradient(260deg, rgb(40, 147, 206), rgb(0, 0, 206) 100%); color: var(--white) !important; top: 0; bottom: 0; left: 0; width: 50%; border-radius: 100px; pointer-events: none; overflow: hidden; translate: calc(var(--slide, 0) * 100%) 0; transition: translate 0.25s; }  .indicator__track { width: 200%; display: grid; height: 100%; grid-template-columns: 1fr 1fr; translate: calc(var(--slide, 0) * -50%) 0; transition: translate 0.25s; }  .indicator__track div { display: grid; place-items: center; height: 100%; font-weight: 700; }  .plans { font-size: .875rem; }  input:nth-of-type(2):checked ~ .indicator { --slide: 1; }  .plan-controls { position: relative; clip-path: inset(-100vh 0 0 0); } /* Ensure the image container maintains its size */ .lazy-image { display: block; opacity: 0;  /* Initially hidden */ transition: opacity 800ms ease-in-out;  /* Smooth fade-in effect */ }  /* Add this class after the image has loaded to trigger the fade-in */ .lazy-image.loaded { opacity: 1; } .member *{ opacity: 0; } .member.fadein *{ opacity : 1; }   .vertical-tabs video.video-tab { display: none; width: 100%; height: auto; }  .vertical-tabs video.video-tab#industrial-video { display: inline-block; /* Show the first video by default */ }  .vertical-tabs .toggle-item h3 { cursor: pointer; margin-bottom: 1rem; } .soft-launch-hide{ display : none; } footer .padding-big li div:last-child{ padding-bottom:5px; }#cookie-banner{display: none;}@media screen and (min-width: 1200px){    img.banner-img.visible-only-lg{        aspect-ratio: 192 / 85;   width: 100%;   height: auto;}}