/*
Theme Name: Neospeq
/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */
@font-face {
font-family: 'Metropolis';
src: url(fonts/Metropolis-Bold.woff2);
font-weight: 700;
}
@font-face {
font-family: 'Metropolis';
src: url(fonts/Metropolis-Regular.woff2);
font-weight: 400;
}
@font-face {
font-family: 'Metropolis';
src: url(fonts/Metropolis-SemiBold.woff2);
font-weight: 500;
}
/*@font-face {
font-family: 'Metropolis';
src: url(fonts/GothamLight.woff);
font-weight: 300;
}*/
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?4q29tc');
src: url('fonts/icomoon.eot?4q29tc#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?4q29tc') format('truetype'),
url('fonts/icomoon.woff?4q29tc') format('woff'),
url('fonts/icomoon.svg?4q29tc#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
html {
color: #222;
font-size: 1em;
line-height: 1.4;
}
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
textarea {
resize: vertical;
}
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
body{
font-family: 'Metropolis',sans-serif;
font-weight: 400;
font-size: 2.3rem;
line-height: 1.56;
}
.neoLog .svgCon,.neoLog svg{
width: 100%;
height: 100%;
}
.neoLog{
width: 14.3rem;
}
.maxWidth{width: 143.6rem;margin-left:auto;margin-right: auto;padding: 0 10rem;box-sizing: border-box;max-width: 100%;}
.topArea{
padding:10rem 0;
display: flex;
align-items: center;
}
.cntryIcons,.cntryText{
opacity: 0;
}
.cntryIcons svg,.cntryIcons .svgCon{
width: 100%;
height: 100%;
object-fit: contain;
}
.home .topArea .maxWidth{
padding: 0 5rem;
box-sizing: border-box;
}
.category header path {
fill: #222;
}
.category header #openMenu .topKav, .category header #openMenu .midKav, .category header #openMenu .bottomKav {
border-bottom: 4px solid #222;
}
.home .topArea{background-color: #282828;}
#bgVideo {
width: 100%;
height: auto;
background: #e0e0e0;
object-fit: cover;
min-height: 50vh;
}
.cntryText li{
height: 22rem !important;
display: flex !important;
align-items: center;
}
.catTop .catIcon{
flex-grow: 0;
}
.catTop{
height: 46rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.catTop h1{
margin: 0;
}
.cntryIcons li{
height: 70rem !important;
display: flex !important;
align-items: center;
}
.f40{
flex: 0 0 40%;
width: 40%;
}
.f60{
flex: 0 0 60%;
width: 60%;
}
.bigText{
font-size: 9rem;
white-space: pre-wrap;
color: #ff735a;
display: block;
line-height: 1;
font-weight: 700;
}
.bigText.smaller{
font-size: 7rem;
}
.smallText{
font-size: 5rem;
white-space: pre-wrap;
color: #fff;
display: block;
line-height: 1.16;
font-weight: 700;
}
.home .topArea .smallText{
font-size: 3.8rem;
line-height: 1.16;
margin-bottom: 30px;
font-weight: 400;
}
.f50{
flex: 0 0 50%;
width: 50%;
}
.mission{
padding: 14rem 0;
background-color: #282828;
color: #fff;
}
h2{
font-size: 7rem;
}
.mission h2{
font-size: 7rem;
margin: 0 0 5.4rem 0;
line-height: 1.07;
}
.mission p{
margin: 0 0 6.1rem 0;
}
.defBtn{
display: inline-flex;
justify-content: center;
align-items: center;
height: 6rem;
line-height: 2rem;
background-color: #ff735a;
padding: 0 4.5rem;
font-size: 2rem;
color: #fff;
text-decoration: none;
border-radius: 3rem;
font-weight: 500;
position: relative;
overflow: hidden;
border:none;
}
.defText{
display: block;
position: relative;
z-index: 99999;
line-height: 2rem;
}
.doti{
content: '';
position: absolute;
display: block;
width: 4rem;
height: 4rem;
background-color: rgba(0,0,0,.3);
border-radius: 50%;
opacity: 0;
transition: .5s opacity ,.5s transform ,.5s background-color;
}
.clicked .doti{
transform: scale(10); background-color: rgba(0,0,0,1);
}
.defBtn:hover .doti{
opacity: 1;
}
.deco{
height: 16.9rem;
}
.caseStudies h2,.caseStudies p{
max-width: 94rem;
text-align: center;
margin: auto;
}
.caseStudies{
padding-top: 16rem;
}
.caseStudies h2{
margin-top: 0;
margin-bottom: 6rem;
line-height: 1;
}
.caseStudies p{
margin-top: 0;
margin-bottom: 6.4rem;
}
.decoLeft{
flex: 0 0 40%;
background-image: url(img/left_patt.svg);
background-position: right center;
background-size: auto 17rem;
background-repeat: repeat-x;
}
.decoRight{
flex: 0 0 60%;
background-image: url(img/right_patt.svg);
background-size: auto 17rem;
background-position: left center;
background-repeat: repeat-x;
}
.products ul{
flex-wrap: wrap;
align-items: flex-start;
}
.products li{
flex: 0 0 33.33333%;
text-align: center;
margin-top: 7rem;
opacity: 0;
position: relative;
}
.products{
padding-bottom: 20rem;
}
.products h2{
margin-bottom: 5.7rem;
line-height: 7rem;
margin-top: 13rem;
}
.products p{
margin-top: 0;
}
.products li a{
display: inline-flex;
flex-direction: column;
color: #17191d;
font-size: 1.8rem;
text-decoration: none;
position: relative;
width: 20.5rem;
height: 20.5rem;
transition: .3s all;
}
.products li a:before{
position: absolute;
top:0;
left: 0;
content: '';
display: block;
width: 100%;
height: 100%;
background-color: #ff735a;
border-radius: 50%;
transition: .3s all;
opacity: 0;
}
.products li a:hover,.products li.currentCat a{
color: #fff;
}
.products li a:hover:before,.products li.currentCat a:before{
opacity: 1;
}
.products li a h3{
max-width: min-content;
margin: 2.5rem auto ;
line-height: 1.2;
}
.products li a .catIcon,.products li a h3{
position: relative;
font-weight: 500;
font-size: 1.8rem;
}
.products li a svg{
max-width: 12rem;
max-height: 10rem;
}
.products li a path{
transition: .3s all;
}
.products li a:hover path,.products li.currentCat a path{
fill:#fff;
}
.catIcon{
flex-grow: 1;
display: flex;
align-items: flex-end;
justify-content: center;
}
.solutions .solLeft{
padding-right: 14rem;
}
.solutions h2{
margin-bottom: 5.4rem;
line-height: 7rem;
}
.solutions p{
margin-top: 0;
margin-bottom: 6.6rem;
}
.solutions{
background-color: #f5f5f5;
padding: 11.2rem 0;
}
.csList li{
flex:0 0 33.3333%;
height: 0;
padding-bottom: 33.33333%;
position: relative;
}
.csList li a{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
overflow: hidden;
background-size: cover;
}
.rib{
width: 3.3333vw;
height: 3.3333vw;
flex: 0 0 3.3333vw;
position: relative;
overflow: hidden;
}
.ourTeamList li .rib{
width: 2.26vw;
height: 2.26vw;
flex: 0 0 2.26vw;
}
.wtri{
background-image: linear-gradient(to right top, white 0%, white 50%, transparent 50%);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.wtrib{
background-image: linear-gradient(to right top, #365770 0%, #365770 50%, transparent 50%);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.ribCon {
position: absolute;
left:0;
top:0;
transition: .5s all;
opacity: 0;
}
.single .ribCon,.single .wtrib{
top:auto;
bottom: 0;
}
.csList li a:hover .ribCon ,.teamMemberDetails:hover .ribCon,.clicked .teamMemberDetails .ribCon{
opacity: 1;
}
.rib:before{
position: absolute;
content: '';
display: block;
width: 100%;
height: 100%;
background-color: #335670;
top:100%;
left:-100%;
transition: .3s all;
transition-timing-function: ease-in-out;
opacity: 0;
}
.ourTeamList li .rib:before{
background-color: #fff;
}
.rib.lastRib:before{
background-color: transparent !important;
width: 0;
height: 0;
border-style: solid;
border-width: 3.3333vw 0 0 3.3333vw;
border-color: transparent transparent transparent #335670;
}
.ourTeamList li .rib.lastRib:before{
border-color: transparent transparent transparent #fff;
}
.op{
transform-origin: center;
transform: rotate(180deg);
}
.csList a .rib:before,.ourTeamList li .teamMemberDetails .rib:before,.ourTeamList li .rib:before{
opacity: 1;
top:0;
left:0;
}
.teamMemberDetails {
overflow: hidden;
}
.ourTeamList li.clicked .details{
background-color: #fff;
}
.ourTeamList li.clicked .kav2{
transform: rotate(0);
}
.ourTeamList li .details{
transition: .3s all;
transition-delay: .3s;
}
.home .ribCon h3{
font-size: 4.6rem;
line-height: 1.08;
position: absolute;
bottom:-1rem;
left:0;
margin: 0;
padding: 6rem;
color: #fff;
font-weight: 400;
width: min-intrinsic;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
display: table-caption;
display: -ms-grid;
-ms-grid-columns: min-content;
opacity: 0;
transition: .3s all;
transition-delay: .3s;
}
.productsList .ribCon h2,.single .productsList .ribCon h3{
line-height: 1.08;
width: min-intrinsic;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
display: table-caption;
display: -ms-grid;
-ms-grid-columns: min-content;
}
.csList li a:hover h3{
bottom: 0;
opacity: 1;
}
.details{
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 2rem;
box-sizing: border-box;
left: 0;
}
.m70{
max-width: 70%;
}
.openTeam{
width: 8rem;
height: 8rem;
border:none;
background-color: transparent;
visibility: hidden;
opacity: 0;
transition: .3s all;
transition-delay: .8s;
top:0;
position: absolute;
right:0;
background-image: linear-gradient(to left bottom, white 0%, white 50%, transparent 50%);
}
.details p{
font-size: 1.3rem;
line-height: 1.2;
max-height: 0;
overflow: hidden;
transition: .75s all;
transition-timing-function: ease-in-out;
opacity: 0;
margin: 0;
}
.ourTeamList li.clicked p{
max-height: 100%;
opacity: 1;
}
.openTeam .kav1 {
position: absolute;
right: 1.5rem;
top: 2rem;
transition: .3s all;
transition-delay: 0;
width: 2rem;
height: 3px;
left: auto;
}
.pm a{
dominant-baseline: text-bottom;
text-decoration: none;
color: #222;
}
.openTeam .kav2 {
position: absolute;
transform: rotate(90deg);
right: 1.5rem;
top:2rem;
transition: .3s all;
transition-delay: 0;
width: 2rem;
height: 3px;
left: auto;
}
.ourTeamList li h3,.ourTeamList li h4{
font-weight: 500;
font-size: 3.1rem;
position: relative;
bottom:-1rem;
left:0;
margin: 0;
opacity: 0;
transition: .3s all;
}
.ourTeamList li h3{
transition-delay: .4s;
line-height: 1.1;
margin-bottom: 1.5rem;
}
.ourTeamList li h4{
transition-delay: .5s;
line-height: 1.1;
}
.ourTeamList li h4{
font-weight: 400;
font-size: 1.8rem;
}
.ourTeamList li .teamMemberDetails:hover h3,.ourTeamList li .teamMemberDetails:hover h4{
bottom: 0;
opacity: 1;
}
.ourTeamList li.clicked h3,.ourTeamList li.clicked h4{
bottom: 0;
opacity: 1;
}
.linkCon{
margin-top: 8.1rem;
}
.news{
margin-top: 11rem;
background-color: #fafafa;
padding-bottom: 13rem;
}
.topP,.btmP{
text-align: center;
padding-top: 11rem;
padding-bottom: 13rem;
}
.btmP{
background-color: #365770;
}
.topP h2,.btmP h2{
margin-top: 0;
}
.topP p,.btmP p{
font-size: 2.4rem;
line-height: 1.56;
}
.btmP p,.btmP h2{
color: #fff;
}
.news h2{
margin: 0;
text-align: center;
padding-top: 11rem;
}
.newsList {
flex-wrap: wrap;
margin: 4.3rem auto 0 auto;
}
.decoLeft{
flex: 0 0 40%;
background-image: url(img/left_patt.svg);
background-position: right center;
background-size: auto 17rem;
}
.newsList li{
flex: 0 0 33.3333%;
width: 33.3333%;
padding: 0 1.5rem;
box-sizing: border-box;
}
.newsImg{
width:100%;
height: 0;
padding-bottom: 100%;
background-size: cover;
}
.newsList li h3{
margin-bottom: 0;
font-size: 2.6rem;
}
.newsList li p{
font-size: 1.8rem;
}
.contactForm span.wpcf7-form-control-wrap{
display: block;
}
.contactForm input,.contactForm textarea{
font-size: 1.6rem;
border: none;
width: 100%;
}
.contactForm input{
line-height: 7.2rem;
padding: 0 1.5rem;
box-sizing: border-box;
}
.contactForm textarea{
padding: 1.5rem;
height: 21rem;
box-sizing: border-box;
}
.company input,.msg textarea,.email input{
background-color: #f5f5f5;
box-sizing: border-box;
}
.greyStrip{
background-color: #f5f5f5;
height: 7.2rem;
}
section.blog-area.ba2022 {
background-color: #e8e9eb;
padding: 90px 0;
}
section.blog-area.ba2022 .flex {
align-items: center;
justify-content: center;
}
section.blog-area.ba2022 .flex h2 {
margin: 0 60px 0 !important;
}
section.blog-area.ba2022 .flex p {
font-size: 2.6rem;
line-height: 1.52;
margin: 0 !important;
}
.hp-blog-wrapper {
width: 100%;
max-width: 1430px;
margin: 60px auto;
display: flex;
flex-wrap: wrap;
}
.hp-blog-wrapper .blog-item {
background: #fff;
}
.hp-blog-wrapper .article-item {
width: calc(33.333333% - 25px);
margin: 0 25px;
background: #fff;
padding-top: 20px;
}
.contactUs {
}
.contactText{
flex:0 0 50%;
padding-right: 11rem;
justify-content: flex-end;
display: flex;
box-sizing: border-box;
}
.contactTextInner{
width: 47rem;
}
.contactText h2{
font-size: 7rem;
margin-bottom: 0;
margin-top: 9.6rem;
line-height: 1.07;
}
#openMenu.pressed{
pointer-events: none;
}
.contactText p{
font-size: 2.6rem;
line-height: 1.52;
}
.contactForm{
flex-grow: 1;
}
.contactForm button.defBtn{
padding: 0 8rem;
}
.formBtnCon {
margin-top: 4.5rem;
margin-bottom: 5rem;
}
header{
position: fixed;
z-index: 99999999;
top:0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 3rem;
box-sizing: border-box;
height: 10rem;
align-items: center;
transition: .3s all;
}
header.scrolled{
background-color: rgba(255, 255, 255,.9);
}
header.scrolled #openMenu .topKav,header.scrolled #openMenu .midKav,header.scrolled #openMenu .bottomKav{
border-bottom: 3px solid #222;
}
header.scrolled path{
fill:#222;
}
.sub-category header path,.single header path{
fill: #17191d;
}
.single-article header path{
fill: #fff;
}
.sub-category .topKav,.sub-category .midKav,
.sub-category .bottomKav,
.single .topKav,
.single .midKav,
.single .bottomKav {
border-bottom: 3px solid #17191d;
}
.sub-category header.scrolled .topKav,
.sub-category header.scrolled .midKav,
.sub-category header.scrolled .bottomKav ,
.single header.scrolled .topKav,
.single header.scrolled .midKav,
.single header.scrolled .bottomKav,
.single-article .topKav,
.single-article .midKav,
.single-article .bottomKav,
.single-article header.scrolled .topKav,
.single-article header.scrolled .midKav,
.single-article header.scrolled .bottomKav {
border-bottom: 3px solid #fff;
}
.sub-category header.scrolled path,.single header.scrolled path{
fill:#fff;
}
.single.single-article header.scrolled path{
fill: #17191d;
}
#openMenu{
background-color: transparent;
border:none;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
}
.topKav{
display: block;
border-bottom: 3px solid white;
border-left: 6px solid transparent;
border-right: 0 solid transparent;
height: 0;
width: 4rem;
margin: 0 0 3px 0;
transform: scaleY(-1);
transition: .5s left cubic-bezier(0.6, -0.28, 0.735, 0.045) 0s, .5s border-bottom linear 0s;
position: relative;
left:0;
}
.midKav{
display: block;
border-bottom: 3px solid white;
border-left: 6px solid transparent;
border-right: 0 solid transparent;
height: 0;
width: 3rem;
margin: 3px 0 3px 0;
transform: scaleY(-1);
transition: .5s left cubic-bezier(0.6, -0.28, 0.735, 0.045).1s, .5s border-bottom linear 0s;
position: relative;
left:0;
}
.bottomKav{
display: block;
border-bottom: 3px solid white;
border-left: 6px solid transparent;
border-right: 0 solid transparent;
height: 0;
width: 2rem;
margin: 3px 0;
transform: scaleY(-1);
transition: .5s left cubic-bezier(0.6, -0.28, 0.735, 0.045) .2s, .5s border-bottom linear 0s;
position: relative;
left:0;
}
.wasPressed .topKav{
transition: .5s left cubic-bezier(0.6, -0.28, 0.735, 0.045) .4s;
}
.wasPressed .midKav{
transition: .5s left cubic-bezier(0.6, -0.28, 0.735, 0.045) .5s;
}
.wasPressed .bottomKav{
transition: .5s left cubic-bezier(0.6, -0.28, 0.735, 0.045) .6s;
}
.pressed .topKav,.pressed .midKav,.pressed .bottomKav{
left:10rem;
}
.facebook a:before {
font-family: 'icomoon';
content: "\e902";
font-size: 1.8rem;
display: block;
text-decoration: none;
color: #fff;
}
.twitter a:before {
font-family: 'icomoon';
content: "\e901";
font-size: 1.8rem;
display: block;
text-decoration: none;
color: #fff;
}
.linkedin a:before {
font-family: 'icomoon';
content: "\e900";
font-size: 1.8rem;
display: block;
text-decoration: none;
color: #fff;
}
.instagram a:before {
font-family: 'icomoon';
content: "\e912";
font-size: 1.8rem;
display: block;
text-decoration: none;
color: #fff;
}
footer{background-color: #282828;padding: 7rem 0;}
.home footer{
margin-top: 4rem;
}
.footerContent{justify-content: space-between;align-items: baseline;}
.fs ul{
display: flex;
align-items: center;
}
.fs li{
padding-right: 1.3rem;
}
.fs a{
font-size: 1.6rem;
color: #fff;
}
.fs a{
text-decoration: none;
}
.fp ul,.cr{
display: flex;
flex-direction: column;
height: 100%;
}
.fp p{color: #fff;font-size: 1.6rem;white-space: pre-wrap;margin: 0;max-width: 290px;height: 75px;}
.copyright{
flex-grow: 1;
}
footer{
padding-top: 5rem;
}
.cr{
line-height: 1.7;
}
.fp li{
display: flex;
flex-grow: 1;
padding-bottom: .5rem;
}
.fp a{
color: #fff;
text-decoration: none;
font-size: 1.6rem;
}
.cr, .cr a{
color: #fff;
text-decoration: none;
font-size: 1.2rem;
}
.rf{
font-size: 1.4rem;
display: block;
margin-top: 3rem;
}
.fs ul#menu-footer-1 {
display: block;
}
.fs ul#menu-footer-1 li a {font-size: 16px;}
.fs ul#menu-footer-1 {
margin-bottom: 15px;
}
nav#site-navigation-footer-2 {
display: block;
text-align: left;
}
nav#site-navigation-footer-2 li a {
font-size: 16px;
}
.cr {
margin-top: auto;
/* margin-bottom: 73px; */
}
nav#site-navigation-footer-2 ul li {
display: block;
padding-bottom: 0;
}
ul#menu-footer-2 {
margin-bottom: 20px;
}
.mainNav{
position: fixed;
right: 0;
top:-100vh;
height: 100vh;
background-color: rgba(255,255,255,.95);
width: 40vw;
padding: 0 16rem;
display: flex;
align-items: center;
box-sizing: border-box;
z-index: 999999999;
transition: .5s all;
transition-delay: .5s;
}
.mainNav.opened{
top:0;
}
.menu-main-menu-container{
}
.menu-main-menu-container>ul>li{
margin-bottom: 2rem;
}
.mainNav a{
font-size: 3.2rem;
color: #17191d;
text-decoration: none;
font-weight: 700;
height: auto;
display: block;
}
.mainNav .sub-menu a{
font-size: 1.8rem;
font-weight: 400;
}
#closeMenu{
width: 40px;
height: 40px;
top: 3rem;
right: 4rem;
transform: rotate(45deg);
border: none;
background: none;
pointer-events: none;
}
.no-events>a{
pointer-events: none;
}
.opened #closeMenu{
pointer-events: auto;
}
.kav1{
position: absolute;
left:-11rem;
top:calc(50% - 3px);
transition: .3s all;
transition-delay: .4s;
}
.kav2{
position: absolute;
transform: rotate(90deg);
left:0;
top:-11rem;
transition: .3s all;
transition-delay: .5s;
}
.kav{
width: 40px;
height: 4px;
background-color: #17191d;display: block;
}
.single .slick-slide img{
width: 100%;
}
.opened .kav1{
left: 0 !important;
}
.opened .kav2{
top:calc(50% - 3px);
}
.wasOpened .kav1{
transition: .3s all cubic-bezier(0.6, -0.28, 0.735, 0.045) !important;
transition-delay: 0s !important;
}
.wasOpened .kav2{
transition: .3s all cubic-bezier(0.6, -0.28, 0.735, 0.045) !important;
transition-delay: .2s !important;
}
.mainNav.wasOpened{
transition-delay: .4s !important;
}
.page-template-about .topArea{
background-color: #ff735a;
padding: 0;
margin: 0;
}
.page-template-about .topArea h1,.category .topArea h1,.post-type-archive-case-study .topArea h1,.page-template-contact .topArea h1{
padding: 0;
margin-top: 0;
margin-bottom: 0;
color: #fff;
font-size: 8rem;
}
.page-template-about .topArea .h1Con,.page-template-contact .topArea .h1Con,.category .topArea .h1Con,.post-type-archive-case-study .topArea .h1Con{
position: absolute;
width: 100%;
height: 100%;
lefT:0;
top:0;
z-index: 9999;
display: flex;
align-items: center;
}
.tar{
flex: 0 0 14.285714%;
height: auto;
padding-bottom: 14.285714%;
position: relative;
overflow: hidden;
}
.tarb:before{
position: absolute;
content: '';
display: block;
width: 100%;
height: 100%;
background-color: #365770;
transform: skewX(45deg);
transform-origin: 0 0;
animation-delay: .3s;
right: -100%;
}
.loaded .tarb:before{
animation: triEnter .7s;
animation-fill-mode: forwards;
}
h2{
font-size: 7rem;
font-weight: 700;
}
@keyframes triEnter{
0%{ right: -100%;}
100%{ right: 0%;}
}
.ourStory strong{
font-size: 2.4rem;
font-weight: 300;
line-height: 1.56;
}
.ourStory{
padding: 12rem 0 10rem 0;
}
.ourStory h2{
text-align: center;
margin-top: 0;
}
.ourStory p{
column-gap: 3.9rem;
column-count: 2;
font-size: 1.8rem;
line-height: 1.74;
white-space: pre-wrap;
}
.ourTeamList{
margin-top: 11rem;
}
.ourTeamList li{
flex: 0 0 25%;
width:25%;
height: 0;
padding-bottom: 25%;
position: relative;
background-size: cover;
overflow: hidden;
}
.imgCon{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top:0;
background-size: cover;
}
.ourTeamList li:nth-child(10n+3){
flex: 0 0 50%;
width:50%;
}
.ourTeamList li .imgCon img{
width: 100%;
height: 100%;
object-fit: cover;
}
.ourTeamList li:nth-child(10n+3) .imgCon,.ourTeamList li:nth-child(10n+3) .teamMemberDetails{
width: 50%;
left: auto;
right: 0;
}
.ourTeamList li:nth-child(10n+3):before{
content: '';
display: block;
position: absolute;
width: 50%;
height: 100%;
background-image: url("img/pat1.svg");
background-size: cover;
}
.ourTeamList li:nth-child(10n+4){
flex: 0 0 50%;
width:50%;
}
.ourTeamList li:nth-child(10n+4) .imgCon,.ourTeamList li:nth-child(10n+4) .teamMemberDetails{
width: 50%;
left: auto;
right: 0;
}
.ourTeamList li:nth-child(10n+4):before{
content: '';
display: block;
position: absolute;
width: 50%;
height: 100%;
background-image: url("img/pat2.svg");
background-size: cover;
background-position: top right;
right: 50%;
top:0;
}
.ourTeamList li:nth-child(10n+5){
flex: 0 0 50%;
width:50%;
}
.ourTeamList li:nth-child(10n+5) .op,.ourTeamList li:nth-child(10n+6) .op,.ourTeamList li:nth-child(10n+10) .op{
width: 50%;
}
.ourTeamList li:nth-child(10n+5) .imgCon,.ourTeamList li:nth-child(10n+5) .teamMemberDetails{
width: 50%;
left: 0;
right: auto;
}
.ourTeamList li:nth-child(10n+5):before{
content: '';
display: block;
position: absolute;
width: 50%;
height: 100%;
background-image: url("img/pat3.svg");
background-size: cover;
background-position: top right;
right: 0;
top:0;
}
.ourTeamList li:nth-child(10n+6){
flex: 0 0 50%;
width:50%;
}
.ourTeamList li:nth-child(10n+6) .imgCon,.ourTeamList li:nth-child(10n+6) .teamMemberDetails{
width: 50%;
left: 0;
right: auto;
}
.ourTeamList li:nth-child(10n+6):before{
content: '';
display: block;
position: absolute;
width: 50%;
height: 100%;
background-image: url("img/pat4.svg");
background-size: cover;
background-position: top right;
right: 0;
top:0;
}
.ourTeamList li:nth-child(10n+10){
flex: 0 0 50%;
width:50%;
}
.ourTeamList li:nth-child(10n+10) .imgCon,.ourTeamList li:nth-child(10n+10) .teamMemberDetails{
width: 50%;
left: 0;
right: auto;
}
.ourTeamList li:nth-child(10n+10):before{
content: '';
display: block;
position: absolute;
width: 50%;
height: 100%;
background-image: url("img/pat5.svg");
background-size: cover;
background-position: top right;
right: 0;
top:0;
}
.ourTeamList li:nth-child(10n+12){
flex: 0 0 50%;
width:50%;
}
.ourTeamList li:nth-child(10n+12) .imgCon,.ourTeamList li:nth-child(10n+12) .teamMemberDetails{
width: 50%;
left: auto;
right: 0;
}
.ourTeamList li:nth-child(10n+12):before{
content: '';
display: block;
position: absolute;
width: 50%;
height: 100%;
background-image: url("img/pat3.svg");
background-size: cover;
background-position: top right;
right: 50%;
top:0;
}
.ourTeam{
background-color: #fafafa;
padding-top: 14rem;
}
.ourTeam .oth{
text-align: center;
margin: 0;
}
.ourTeam .otp{
text-align: center;
margin: 5.6rem 0 0 0;
}
.category .topArea,.post-type-archive-case-study .topArea{
padding: 0;
background-color: #ff735a;
height: 84.5rem;
overflow: hidden;
}
.post-type-archive-case-study .topArea{
background-color: #365770;
}
.post-type-archive-case-study .blueStripe.veryBlue{
background-color: #365770;
z-index: 9999999;
transform: skewY(45deg);
position: absolute;
right: 0;
}
.post-type-archive-case-study .blueStripe {
background-color: #fff;
}
.categoryTop{
justify-content: flex-end;
}
.catX,.catY{
flex:0 0 33%;
width: 33%;
}
.blueStripe{
height: 35rem;
width: 170rem;
background-color: #365770;
transform: skewY(-45deg);
}
.categoryTop .blueStripe,.blueStripeC,.blueTri{
background-color: transparent !important;
position: relative;
overflow: hidden;
}
.loaded .categoryTop .blueStripe:before,.loaded .blueStripeC:before{
animation: .5s bs;
animation-fill-mode: forwards;
}
.categoryTop .blueStripe:before,.blueStripeC:before{
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
top:100%;
background-color: #fff;
}
.categoryTop .blueStripe:after,.blueStripeC:after{
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
top:100%;
background-color: #365770;
}
.loaded .categoryTop .blueStripe:after,.loaded .blueStripeC:after{
animation: .5s bs;
animation-delay: .5s;
animation-fill-mode: forwards;
}
.blueStripeC:before{
background-color: #365770;
}
.blueStripeC:after{
background-color: #fff;
}
.post-type-archive-case-study .categoryTop .blueStripe:after{
background-color: #fff;
}
.post-type-archive-case-study .categoryTop .blueStripe.veryBlue:after{
background-color: #365770;
}
.post-type-archive-case-study .categoryTop .blueStripe:before{
background-color: #ff735a;
}
.categoryTop .whiteStripe {
background-color: transparent;
overflow: hidden;
}
.categoryTop .whiteStripe:after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
top:100%;left: 0;
background-color: #fff;
}
.loaded .categoryTop .whiteStripe:after {
animation: .5s bs;
animation-delay: .5s;
animation-fill-mode: forwards;
}
.blueTri{
height: 32rem;
width: 32rem;
position: relative;
}
.blueTri:after{
content: '';
display: block;
position: absolute;
top:100%;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 32rem 32rem;
border-color: transparent transparent #365770 transparent;
}
.br{
display: none;
}
.loaded .blueTri:after{
animation: .5s bs;
animation-delay: .5s;
animation-fill-mode: forwards;
}
.blueTri:before{
content: '';
display: block;
position: absolute;
top:100%;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 32rem 32rem;
border-color: transparent transparent #fff transparent;
}
.loaded .blueTri:before{
animation: .5s bs;
animation-fill-mode: forwards;
}
@keyframes bs{
0%{
top:100%;
}
100%{
top:0;
}
}
.whiteStripe{
height: 70rem;
width: 170rem;
background-color: #fff;
transform: skewY(45deg); top: -85rem;
position: absolute;
right: 0;
}
.blue1{
margin-top: -85rem;
}
.blue2{
margin-top: 35rem;
}
.seriesList a{
padding-bottom: 40%;
height: 0;
display:block;
position: relative;
color: #fff;
text-decoration: none;
text-align: center;
background-size: cover;
}
.imageSlider li .simgCon{
height: 0;
padding-bottom: 40%;
overflow: hidden;
position: relative;
}
.imageSlider li img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
position: absolute;
top:0;
left:0;
}
.seriesList h3{
font-size: 4.5rem;
}
.srs{
font-size: 2.4rem;
font-weight: 400;
display: block;
position: relative;
top:1rem;
transition: .3s all;
transition-delay: .2s;
opacity: 0;
}
.srst{
display: block;
position: relative;
top:1rem;
transition: .3s all;
transition-delay: .1s;
opacity: 0;
}
.h3Con{
background-color: rgba(0,0,0,.4);
opacity: 0;
transition: .3s all;
}
.seriesList li a:hover .h3Con{
opacity: 1;
}
.seriesList li a:hover .srst,.seriesList li a:hover .srs{
top:0;
opacity: 1;
}
.productsList li{
flex: 0 0 33.3333%;
height: 0;
padding-bottom: 33.33333%;
position: relative;
}
.productsList .ribCon h2 ,.single .productsList .ribCon h3{
position: absolute;
bottom: -1rem;
left: 0;
margin: 0;
padding: 6rem;
color: #fff;
font-weight: 400;
opacity: 0;
transition: .3s all;
font-size: 4.6rem;
transition-delay: .3s;
}
.productsList li a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-size: cover;
}
.productsList li a:hover .ribCon{
opacity: 1;
}
.productsList li a:hover h2,.single .productsList li a:hover h3 {
bottom: 0;
opacity: 1;
}
.subCatHead{
text-align: center;
max-width: 87rem;
margin: 14rem auto;
}
.pId{
font-size: 1.7rem;
}
.slick-dots{
display: flex;
justify-content: center;
position: absolute;
bottom: 2rem;
width: 100%;
}
.slick-dots button{
padding: 0;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
background-color: #17191d;
border: none;
margin: 0 1rem;
}
.slick-dots .slick-active button{
background-color: #ff735a;
}
.spesifications h2{
font-size: 1.7rem;
font-weight: 400;
}
.spesifications p{
font-size: 2.4rem;
white-space: pre-wrap;
margin: 0;
}
.spesifications li:first-child{
margin-left: 0 !important;
}
.spesifications li{
margin: 0 .5rem;
}
.clrs{
width: 70%;
}
.spesifications .clrs li{
margin: 0 1rem 1rem 0 ;
width: 4rem;
height: 4rem;
overflow: hidden;
border-radius: 50%;
position: relative;
}
.spesifications .clrs li img{
width: 10rem;
height: 10rem;
position: absolute;
left:-5rem;
top:-5rem;
}
.s25{
flex: 0 0 25%;
}
.moreProducs{
background-color: #fafafa;
}
.moreProducs h2{
text-align: center;
}
.moreProducs h2{
padding: 9rem 0;
margin: 0;
}
.moreProducs{
margin-top: 11rem;
}
.spesifications {
margin-top: 12.6rem;
}
.otri{
width: 0;
height: 0;
border-style: solid;
border-width: 6.9rem 6.9rem 0 0;
border-color: #ff735a transparent transparent transparent;
}
.quoteArea{
background-color: #fafafa;
padding: 11rem 0;
margin-top: 11rem;
}
.qCon{
width: 95.7rem;
margin: auto;
text-align: center;
}
.merchaot{
justify-content: center;
margin-bottom: 5.5rem;
}
.quote{
font-size: 3.1rem;
font-weight: 500;
line-height: 1.35;
}
.quoted{
font-size: 2.4rem;
}
.single-case-study .moreProducs{
margin-top: 0;
background-color: #fff;
}
.page-template-contact .topArea{
padding: 0;
background-color: #ff735a;
height: 84.5rem;
overflow: hidden;
}
.conTop{
flex-direction: column;
}
.conX{
flex: 0 0 52.7rem;
width: 100%;
height: 52.7rem;
overflow: hidden;
}
.conY{
flex: 0 0 31.8rem;
height: 31.8rem;
overflow: hidden;
display: flex;
justify-content:flex-end;
width: 100%;
}
.blueStripeC {
height: 32rem;
width:200rem;
background-color: #fff;
transform: skewY(45deg);
position: absolute;
}
.blueStripeC1{
right: -83rem;
}
.blueStripeC2{
right: -15.2rem;
}
.contactTop{
padding: 10rem 0 2rem 0;
}
.rf5{
padding-left: 18.7rem;
box-sizing: border-box;
}
.f5b{
font-size: 3.2rem;
font-weight: 500;
}
.page-template-contact .contactForm{
margin-bottom: 3.5rem;
}
span.wpcf7-not-valid-tip{
position: absolute;
right: 1rem;
bottom: 1rem;
color: #ff735a;
font-size: 1.2rem;
}
div.wpcf7-response-output{
color: #ff735a;
font-size: 1.4rem;
border: none;
}
.page-template-custom .topArea{
overflow: hidden;
background-color: #ff735a;
height: 84.5rem;
padding: 0;
}
.page-template-custom .h1Con{
position: absolute;
width: 100%;
height: 100%;
lefT:0;
top:0;
z-index: 9999;
display: flex;
align-items: center;
}
.page-template-custom h1{
font-size: 8rem;
color: #fff;
}
.bulletsList li{
height: 50rem;
display: flex;
align-items: center;
}
.bIcon svg{
width:22.2rem;
height: 30rem;
}
.bulletsList li .liCon{
display: flex;
}
.bulletsList li:nth-child(even) .liCon{
flex-direction: row-reverse;
}
.bulletsList li:nth-child(odd){
background-color: #f5f5f5;
}
.bulletsList li h2{
font-size: 4.6rem;
line-height: 1.09;
margin-top: 2rem;
margin-bottom: 3.4rem !important;
}
.bulletsList li p{
font-size: 1.8rem;
line-height: 1.62;
margin: 0;
}
.bliText{
max-width: 57rem;
}
.bIcon{
flex-grow:1;
display: flex;
justify-content: center;
align-items: center;
}
.number{
font-size: 2.3rem;
}
.number,.bulletsList li h2,.bulletsList li p{
opacity: 0;
position: relative;
top:2rem;
top:2rem;
}
.wrp{
display: block;
}
.wrp p{
color: #fff;
max-width: 37rem;
font-size: 2.3rem;
line-height: 1.3;
}
.footerLogo{
width: 14.3rem;
}
.footerLogo .svgCon, .footerLogo svg {
width: 100%;
height: 100%;
}
.ads{
white-space: pre-wrap;
}
*:focus{
outline: none;
}
/* ==========================================================================
New developments 2021
========================================================================== */
section.new-page-banner {
height: 58vh;
background-size: cover;
background-position: 50%;
color: #fff;
position: relative;
}
.npb-content {
position: relative;
top: 50%;
transform: translateY(-50%);
padding: 0 10vw;
}
.npb-content h1,
.npb-content h2 {
margin: 0;
font-size: 4.35em;
margin-bottom: 0 !important;
}
.npb-content p {
margin: 0;
font-size: 1.58em;
}
/* Fron page new sections */
.solutions img {
max-width: 100%;
height: auto;
}
section.solutions-page {
background-color: #e0e0e0;
padding: 4rem 20px 8rem;
text-align: center;
}
.flex.solutions-repeater {
align-items: baseline;
justify-content: center;
margin-bottom: 30px;
max-width: 100%;
}
.flex.solutions-repeater .solution-item {
margin: 0 10px;
max-width: 43%;
}
.flex.solutions-repeater .solution-item img {
width: 100%;
height: auto;
}
section.clients {text-align: center;padding: 10rem 0 0;}
ul.clientsList {
flex-wrap: wrap;
justify-content: space-between;
margin: 50px auto 100px;
}
ul.clientsList li {
margin: 30px 30px 90px;
border: 1px solid #fff;
width: calc(33.333333333% - 60px);
box-sizing: border-box;
}
ul.clientsList li img {
position: relative;
top: 50%;
transform: translateY(-50%);
max-width: 100%;
height: auto;
}
ul.clientsList li:last-child img {
top: 50%;
}
section.caseStudies.cs2021 {
background: #282828;
color: #fff;
padding: 16rem 0;
}
.cs2021-wrapper {
margin: 0 auto;
max-width: 1671px;
box-sizing: border-box;
padding: 20px;
}
.cs2021-row.flex {
justify-content: space-between;
margin-bottom: 20px;
}
.cs2021-row.flex img {
max-width: 100%;
height: auto;
}
.cs2021-row.flex a {
margin: 0 10px;
position: relative;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.cs2021-row.flex a span {
position: absolute;
z-index: 99;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
color: #fff;
width: 100%;
display: block;
text-align: center;
height: 39px;
opacity: 0;
font-size: 26px;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.cs2021-row.flex a:before {
-webkit-transition: all 1500ms ease;
-moz-transition: all 1500ms ease;
-ms-transition: all 1500ms ease;
-o-transition: all 1500ms ease;
transition: all 1500ms ease;
content: '';
background: rgba(0,0,0,0.6);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
}
.cs2021-row.flex a:hover:before, .cs2021-row.flex a:hover span {
opacity: 1;
}
/* Solutions (new page) */
section.solutions-sections {
padding-bottom: 16rem;
}
section.solutions-content {
padding: 60px 0;
text-align: center;
}
.solution-item a {
box-shadow: 0px 20px 20px rgb(0 0 0 / 8%);
-webkit-transition: all 250ms cubic-bezier(.02, .01, .47, 1);
-moz-transition: all 250ms cubic-bezier(.02, .01, .47, 1);
transition: all 250ms cubic-bezier(.02, .01, .47, 1);
display: block;
}
.solution-item a:hover {
box-shadow: 0 40px 40px rgb(0 0 0 / 12%);
transform: translate(0,-10px);
transition-delay: 0s !important;
}
section.solutions-content .entry-content {
max-width: 972px;
margin: 0 auto;
padding: 0 15px;
}
section.solutions-content .entry-content h2,
section.solutions-content .entry-content h3 {
margin: 0;
margin-bottom: 0 !important;
font-size: 32px;
}
section.solutions-content .entry-content h4{
margin: 0;
margin-bottom: 0 !important;
font-weight:400;
}
.rel-divider {
-webkit-transition: all 900ms ease;
-moz-transition: all 900ms ease;
-ms-transition: all 900ms ease;
-o-transition: all 900ms ease;
transition: all 900ms ease;
width: 5px;
height: 2px;
background-color: #000000;
display: block;
margin: 30px auto 25px;
}
.rel-divider.go {
width: 325px;
}
div.sse-itm.sse-odd {
background: #ebebeb;
}
div.sse-itm {
padding: 60px 0 90px;
text-align: center;
}
.sse-content {
display: flex;
flex-wrap: wrap;
align-items: center;
max-width: 1230px;
margin: 0 auto 60px;
}
h2.ssec-title {
width: 50%;
position: relative;
padding: 0 5% 0 15%;
box-sizing: border-box;
text-align: right;
}
.ssec-content {
width: 50%;
position: relative;
padding: 0 5%;
box-sizing: border-box;
text-align: left;
font-size: 18px;
line-height: 1.3;
}
.ssec-content:after {
-webkit-transition: all 900ms ease;
-moz-transition: all 900ms ease;
-ms-transition: all 900ms ease;
-o-transition: all 900ms ease;
transition: all 900ms ease;
content: '';
height: 2%;
width: 2px;
background: #000000;
display: block;
position: absolute;
top: 9%;
left: 0;
bottom: 9%;
margin: auto;
}
.ssec-content.go:after{
height: 66%;
}
a.sse-button {
position: relative;
color: #fff;
background-color: #ff735a;
text-decoration: none;
width: 150px;
display: block;
padding: 10px 0;
border-radius: 35px;
float: right;
}
a.sse-button:hover {
background-color: #333;
}
.sse-button-wrapper a.defBtn {
position: absolute;
right: 0;
}
.sse-button-wrapper{
position:relative;
}
.sse-button-wrapper,
.sse-slider {
max-width: 1230px;
margin: 15px auto;
}
.sse-slider .slick-dots .slick-active button {
background-color: #ffd200;
}
.sse-slider .slick-dots {
bottom: -56px;
}
/* Blog */
section#blog-section {
padding: 140px 0 0;
max-width: 1190px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.blog-item {
width: calc(33.33333333% - 40px);
padding: 20px;
box-shadow: 0px 20px 20px rgb(0 0 0 / 8%);
-webkit-transition: all 250ms cubic-bezier(.02, .01, .47, 1);
-moz-transition: all 250ms cubic-bezier(.02, .01, .47, 1);
transition: all 250ms cubic-bezier(.02, .01, .47, 1);
box-sizing: border-box;
margin: 20px;
text-decoration: none;
color: #000000;
}
.blog-item:hover{
box-shadow: 0 40px 40px rgb(0 0 0 / 12%);
transform: translate(0,-10px);
transition-delay: 0s !important;
}
.blog-item.main-article {
width: calc(66.666666666% - 40px);
}
.blog-item img {
max-width: 100%;
display: block;
}
.bi-content.flex h3 {
width: 55%;
margin: 0;
font-size: 25px;
}
.bi-content h3 {
font-size: 19px;
line-height: 1.3;
}
.bi-content.flex {
flex-wrap: wrap;
justify-content: space-between;
margin: 20px 0;
}
.bi-content.flex .bi-content-summery {
width: 45%;
font-size: 15px;
line-height: 1.2;
}
.bi-content-summery p {
margin: 0;
color: #979797;
margin-bottom: 10px;
}
.bi-content h3 {
font-size: 19px;
line-height: 1.3;
}
.blog-item:hover h3 {
color: #ff735a;
}
.bi-content-summery {
font-size: 13px;
}
.pagination {
text-align: center;
margin: 100px auto;
}
.pagination a {
text-decoration: none;
margin: 0 5px;
color: #365770;
font-size: 15px;
}
a.page-numbers.prev,a.page-numbers.next {
margin: 0 30px;
}
.pagination span {
font-size: 15px;
color: #ff735a;
margin: 0 5px;
}
.pagination a:hover {
color: #ff735a;
}
/* Article */
article.blog-article {
max-width: 780px;
margin: 80px auto;
}
article.blog-article > img {
width: 100%;
height: auto;
}
.writer-info {
margin-bottom: 30px;
}
.writer-info img {
margin-right: 20px;
}
/* ==========================================================================
New developments 2021 END
========================================================================== */
/* ==========================================================================
Media Queries
========================================================================== */
@media only screen and (min-width: 35em) {
}
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
}
/* ==========================================================================
Print styles
========================================================================== */
@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}