@charset "utf-8";

/*Load Base css*/
@import 'dd-nubase.css?v=1.1';

/*Brand Colours*/
:root {
    --black: #1C1E20;
    --purple: #332D3E;
    --green: #09A275;
    --lilac: #7E7490;
    --grey: #2E4050;
    --mid-grey: #878787;
    --cream: #F0EDEC;
    --light-grey: #D1DAE6;
    --delay: 0.4s;
}

/*Typeography*/
body{
    background:#fff;
    color:var(--purple);
    font-family: franklin-gothic-urw, sans-serif; 
    font-size: 20px;
    font-weight: 300;
    font-style: normal;
    line-height: 26px;
       
}

h1,h2,h3,h4,h5,h6,.h1{

    font-weight:300;
    font-style: normal;
    font-kerning: normal;
    margin: 0 0 20px;

}

.h1,
h1 {
  font-size: 40px;
  line-height: 48px;
}
.h2,
h2 {
  font-size: 32px;
  line-height:38px;
    font-weight: 400;
}
.h3,
h3{
    font-size: 24px;
    line-height: 30px;
    font-weight: 400;
}
.h4,
h4 {
    font-size: 20px;
    font-weight: 300;
    line-height: 26px;
     
}
.h5,
h5 {
    font-size: 18px;
    font-weight: 300;
    line-height: 26px;
}

.h6,
h6 {
    font-size: 14px;
    line-height: 16px;
    font-weight: 400;
    text-transform: uppercase;
    margin: 0 0 20px;
}
p {
    font-size: 20px;
    font-weight: 300;
    line-height: 26px;
    margin: 0 0 20px;
   
}
p:last-child{
    margin: 0;
}


.rte a:not(.button){
    color: inherit;
    /*text-decoration: underline;*/
    font-weight: 500;
}
.rte a:not(.button):hover{
    color: var(--green);
    text-decoration: none;
}
a:hover{
    color: var(--green);
    text-decoration:inherit;
}
p.cta{
	display: block;
	margin: 0;
	padding: 30px 0 0;
}
p.cta.center{
    text-align: center;
    margin: 50px auto 0;
}
p.cta.right{
    text-align: right;
}

button,
.button {
    display:inline-flex;
    align-items: center;
    justify-content: center;
	background:var(--cream);
	color:var(--purple);
	border-radius: 25px;
    height: 40px;
	padding: 0 30px;
    min-width: 160px;
	font-weight: 400;
	font-size: 0.70em;
}
.button.xl{
    height: 66px;
    border-radius: 33px;
}
.button.narrow{
    min-width:unset;
    padding: 0 20px;
    
}
.button.white{
    background: #fff;
}
.button.purple{
    background:var(--purple);
    color: #fff;
}
.button.lilac{
    background:var(--lilac);
    color: #fff;
}
button:hover,
.button:hover{
    background:var(--green);
	color:#fff;
}
button svg,
.button svg{
    width:20px;
    height: 16px;
    margin:0 5px;
}

.featimg img, picture img {
	background-color: transparent;
}
.button.back-arrow svg{
    transform: scale(-1);
}

/*masthead*/
#masthead {
	padding: 30px 0 0;
	border: none;
	min-height: unset;
	height: 90px;
	position: fixed;
    background: #fff;
	width: 100%;
	z-index: 9000;
	top: 0;
	left: 0;
	transition: all .6s cubic-bezier(.36,.28,.29,1);
	align-items: center;
}

.home #masthead{
    background: none;
}
#masthead.docked{
    padding: 20px 0;
    height:75px;
    /*box-shadow: -2px 4px 6px #0003;*/
    background: #fff;
}

#main{
    padding-top: 90px;
}
#navframe {
	position: relative;
	display: flex;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	justify-content: flex-end;
}
#logo {
	display: flex;
	margin:auto;
	width: 100px;
	height: 100px;
	align-items: center;
	justify-content: center;
	background: none;
	padding: 0;
	position: absolute;
	top:30px;
    bottom:0;
	left: 40px;
    transition: all .5s cubic-bezier(.38,.28,.29,1);
    transform-origin: 0 0;
}
#logo img{
    height: auto;
}
#masthead.docked #logo{
    width:50px;
    height: 50px;
    top:0;
}
#logo svg {
	width: 100%;
	height: 100%;
}
#logo:hover {
	color:#fff;
}

#footer{
    background-color: var(--purple);
    color: #fff;
    padding: 60px 0 30px;
    margin: 0 30px 30px;
}
#footer .container{

}
.footer-col{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.footer-col > div{
    width:30%;
}
.footer-col .col-one h5:last-child{
    margin:0;
}
.footer-col .col-one .address{
    margin-bottom: 30px;
}

.footer-col .col-one p + h6{
    margin-top:30px;
}
.footer-col .col-two{
    
}
.footer-col .col-three{
    
}
.icon-grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap:30px;
}
.icon-grid .g-icon{
    display: block;
}

#footer .copyright {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin: -23px 0 0;
	padding: 0;
	font-size: 13px;
	margin-left: 35%;
}
.copyright *{
    font-size: 14px;
    line-height: 18px;
}
.copyright p{
    margin:0;
}
#menu-footer-menu{
    display: flex;
    margin: 0 20px 0 0;
}
#menu-footer-menu li{
    display: block;
    margin: 0 10px;
}
.mmtag {
	/*color: var(--grey);*/
	margin:0;
	font-weight: 300;
	padding: 0;
    font-size: 14px;
}
.mmtag a{
    margin-left: 5px;
}


.social{
    display: flex;
    align-items: center;
    margin:0 0 30px 0;
}
.social a + a{
    margin-left:20px;
}
.social svg {
	width: 30px;
	height: 30px;
	/* margin-top: -4px; */
	/* margin-right: 4px; */
}
#footer a:not(.button):hover{
    color: var(--green);
}

/*Nav*/
.nav-menu > li > a {
	font-size: 18px;
	font-weight: 400;
	letter-spacing:unset;
	padding: 0;
    position: relative;
}
.nav-menu > li > a::after{
    content:"";
    display: block;
    height: 2px;
    width:0;
    background: var(--green);
    transition: width ease-in-out 0.2s;
    position: relative;
    margin:0;
}

.nav-menu li.current_page_item > a, 
.nav-menu li.current_page_parent > a,
.nav-menu > li.current-menu-item > a, 
.nav-menu > li.current-page-ancestor > a {
	color: currentColor;
}
.single-project li.projects > a::after,
.tax-sector li.projects > a::after,
.nav-menu li.current_page_item > a::after, 
.nav-menu li.current_page_parent > a::after,
.nav-menu > li.current-menu-item > a::after, 
.nav-menu > li.current-page-ancestor > a::after {
	width:100%;
}

.nav-menu > li.home > a::before{
    display: none;
}
.post-type-archive-project li.news > a,
.tax-sector li.news > a,
.single-project .nav-menu li.news > a,
.single-project .nav-menu li.current_page_parent > a{
    color: currentColor;
}
.post-type-archive-project li.news > a::after,
.tax-sector li.news > a:after,
.single-project .nav-menu li.news > a:after{
    width:0%;
}



.menu-icon span {
	background-color:#fff;
}
#wrapper.active .menu-icon span {
	background-color: var(--green);
}

#page_careers #content,
#page_contact #content{
    padding-top:120px;
}

/*--------------------------------------------------------------------------- home */
.home img{
    color:#313131;
}

.container {
    width:100%;
    max-width:1740px;
    margin: 0 auto;
    padding: 0 30px;
}
#masthead .container{
    position: relative;
}
.featimg.vh{
    padding: 0;
    height:90vh;
}

.featimg.zoom-out,
.featimg.zoom{
    overflow: hidden;
}

.featimg.zoom img,
#brandimg picture{
    transform: scale(1.08);
    will-change: transform;
}

.featimg.zoom.active img,
#brandimg.active picture{
  -webkit-animation: imgzoomin 3.8s ease-out forwards;
  -moz-animation:    imgzoomin 3.8s ease-out forwards;
  -o-animation:      imgzoomin 3.8s ease-out forwards;
  animation:         imgzoomin 3.8s ease-out forwards;
}

.featimg.zoom-out img{
    transform: scale(1);
    will-change: transform;
}
.featimg.zoom-out.active img{
  -webkit-animation: imgzoomout 3.8s ease-out forwards;
  -moz-animation:    imgzoomout 3.8s ease-out forwards;
  -o-animation:      imgzoomout 3.8s ease-out forwards;
  animation:         imgzoomout 3.8s ease-out forwards;
}


/*zoomin*/
@-webkit-keyframes imgzoomin {
  0%   { transform: scale(1.2); }
  100% { transform: scale(1); }
}
@-moz-keyframes imgzoomin {
  0%   { transform: scale(1.2); }
  100% { transform: scale(1); }
}
@-o-keyframes imgzoomin {
  0%   { transform: scale(1.2); }
  100% { transform: scale(1); }
}
@keyframes imgzoomin {
  0%   { transform: scale(1.2);}
  100% { transform: scale(1); }
}

/*zoomout*/
@-webkit-keyframes imgzoomout {
  0%   { transform: scale(1); }
  100% { transform: scale(1.2); }
}
@-moz-keyframes imgzoomout {
  0%   { transform: scale(1); }
  100% { transform: scale(1.2); }
}
@-o-keyframes imgzoomout {
  0%   { transform: scale(1); }
  100% { transform: scale(1.2); }
}
@keyframes imgzoomout {
  0%   { transform: scale(1);}
  100% { transform: scale(1.2); }
}



/*splitbox*/
.splitbox{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width:100%;
    height: 100%;
    z-index: 100;
    
}
.splitbox > div{
    display: block;
    width:50%;
    /*border:1px dashed #ccc; */
}


/*Sticky-split*/
.sticky-split{
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    align-items: flex-start;
    margin: 0 0 30px;
}
.sticky-split .sticky-side{
    display: flex;
    flex-direction: column;
    /*border: 1px dashed #ccc;*/
    position: sticky;
    top:120px;
    height: 80vh;
    width:500px;
}
.sticky-split .scroll-side{
    display: block;
    /*border: 1px dashed #ccc;*/
    width:calc(100% - 530px);
}

/*homepage*/
#home{
    display: block;
    width:100%;
    padding:0;
    margin: 0 auto;
    max-width:100%;
}

#home_intro{
    display: flex;
    min-height: 100vh;
    width:100%;
    position: relative;
    padding: 0;
    margin-top:-90px;
    align-items: flex-end;
    overflow: hidden;
}

#home_intro .v_iframe,
#home_intro picture{
    display: block;
    position:absolute;
    z-index: -1;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    padding: 0;
    margin: auto;
    
}

#home_intro .v_iframe::before,
#home_intro picture::before{
    content:"";
    display: block;
    z-index: 1;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(19,19,19,0.6) 100%);
}


#home_intro .splitbox{
    color: #fff;
}
#home_intro .splitbox > div{
    padding: 60px;
    display:flex;
    flex-direction: column;
    justify-content: flex-end;
}
#home_intro .tagline,
#home_intro h1{
    margin: 0;
    max-width:570px;
}


#home_projects{
    display: block;
    padding:30px;
}
#home_projects .sticky-split{
    padding: 30px;
    background: var(--cream);
}
#home_projects .sticky-side{
    width:calc(50% - 30px);
}
#home_projects .scroll-side{
    width:50%;
}

#home_projects .sticky-side .txt{
    display: block;
    max-width:630px;
}

#home_projects .term-list{
    
}
#home_projects .term-list .term{
    display: block;
    position: relative;
    margin: 0 0 30px;
}
#home_projects .term:last-child{
    margin: 0;
}
#home_projects .term .button{
    position: absolute;
    bottom:30px;
    left:30px;
    z-index: 100;
}
#home_projects .term:hover .button{
    background:var(--green);
}
#home_projects .term .imgbox{
    overflow: hidden;
}
#home_projects .term .featimg{
    padding-top:0;
    aspect-ratio:5/2.5;
    transition: all .4s cubic-bezier(.36,.28,.29,1);
}
#home_projects .term:hover .featimg{
    transform: scale(1.1);
}



#home_stats{
    display: block;
    margin:0 0 30px;
}

#quote_box .bx-wrapper .bx-pager, 
#quote_box .bx-wrapper .bx-controls-auto {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 20px;
}
#quote_box .bx-wrapper .splitbox{
    padding-bottom:30px;
}
#quote_box .bx-pager.bx-default-pager a {
	background: #fff6;
	text-indent: -9999px;
	display: block;
	width: 30px;
	height: 5px;
	margin: 0 15px;
	outline: 0;
	border-radius: 8px;
}
#quote_box .bx-pager.bx-default-pager a.active{
    background: #fff;
}

#home_about{
    display: block;
    margin-bottom: 30px;
}
#home_about .splitbox{
    padding: 30px;
    background: var(--purple);
    color:#fff;
}
#home_about .imgbox{
    width:calc(60% - 30px);
}
#home_about .txt{
    width:40%;
    max-width:550px;
    
}
#home_about .featimg{
    padding-top:0;
    aspect-ratio:5/2.5;
}

#home_news{
    display: block;
    margin-bottom: 30px;
    padding: 30px;
}
#home_clients{
    display: block;
    padding: 0 30px;
}
ul.bxslider-clients{
    display: flex;
}
ul.bxslider-clients li {
	display: flex;
	align-content: center;
	justify-content: center;
	align-self: center;
}


/*contact page*/

#contact .splitbox{
    align-items: center;
}
#contact .splitbox > div {
    width:calc(50% - 15px);
}
#contact .splitbox > .map {
    margin: 60px 0 30px;
}
#contact .splitbox > .map .txt{
    padding: 4%;
    background: var(--cream);
}

#contact .splitbox > .map iframe{
    display: block;
    width:100%;
    border:none;
    aspect-ratio:5/2;
    background:var(--mid-grey);
    height: auto;
}
#contact .splitbox .txt1{
    max-width: 500px;
}
#contact .splitbox .telephone a{
    display: block;
    background: url('../img/icon_phone.svg') 0 65% / 22px auto no-repeat;
    padding-left:35px;
}
#contact .splitbox .email a{
    display: block;
    background: url('../img/icon_mail.svg') 0 65% / 20px auto no-repeat;
    padding-left:35px;
}
/*Homepage Sections*/







#news .frame,
#about .frame{
    display: flex;
    justify-content: space-between;
    width:100%;
}

#about{
    min-height:unset;
    padding-bottom: 200px;
}

#about .frame .txt{
    display: block;
    width:60%;
}
#about .frame h5{
    
}
#awards .btn{
    text-transform: none;
    font-weight: 300;
}



.propertylist{
    display: block;
    margin:200px auto 0;
}
.propertylist .property{
    display: block;
    padding:0;
    margin: 0 0 100px;
    
}
.property:hover{

}
.property a{
    display: block;
    width:100%;
}
.property .featimg {
	padding-top: 50%;
    z-index: 0;
}





#news {
	flex-wrap: wrap;
	align-content: center;
    min-height: unset;
}
#news .frame .txt{
    display: block;
    width:70%;
    max-width:900px;
}
#news .cta{
    width:100%;
}


#awards{
    min-height: unset;
    
}
#awards .frame {
	flex-wrap: wrap;
    justify-content: space-between;
	width: 100%;
	display: flex;
}
#awards .frame .txt{
    display: block;
    width:70%;
    max-width:900px;
}
#awards .frame .txt2{
    display: block;
    width:70%;
    max-width:900px;
}

#awards .frame h5{
    width:30%;
}
#awards .frame .txt{
    margin-bottom: 100px;
}

#awards .bx-wrapper {
	background: transparent;
	max-width: 100% !important;
}
#awards .bx-wrapper img{
    display: block;
    object-fit: contain;
}
#awards .bx-wrapper .imgbox{
    /*max-width:220px;
    border:1px solid #444;*/
}





/*blog*/
/*.archive:not(.tax-sector) #content,*/
#page_blog #content{
    padding: 0 30px;
}
#bloglist{
    display: block;
    padding:120px 30px 30px;
    margin: 0 auto 30px;
    background: var(--cream);
}
#bloglist .splitbox{
    margin:0 0 30px;
}
#bloglist .splitbox .imgbox{
    width:40%
}
#bloglist .splitbox .txtbox{
    width:60%;
    padding:30px;
}
#bloglist .splitbox:hover{
    color: var(--green);
}
#bloglist .splitbox:hover .button{
    background:var(--green);
}
#bloglist .splitbox .imgbox{
    overflow: hidden;
}
#bloglist .splitbox .featimg{
    transition: all .4s cubic-bezier(.36,.28,.29,1);
    padding-top: 65%;
}
#bloglist .splitbox:hover .featimg{
    transform: scale(1.1);
}

/*category list for articles and sectors*/
ul.terms{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width:100%;
    margin:0 0 60px;
}
ul.terms li{
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    margin: 0 20px 0 0;
}
ul.terms li a{
    display: block;
    color:var(--mid-grey);
}

ul.terms li.current-cat a{
    color:var(--purple);
}
/*sector list*/

ul.terms li span{
    display: block;
    text-align: center;
    padding:0;
    width:40px;
    height: 20px;
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    background: var(--cream);
    border-radius:20px;
    margin: 0 10px 0 0;
}
ul.terms li.current-cat span{
    background: var(--purple);
    color: #fff;
}

.project{
    margin-bottom: 30px;
}
.project .splitbox > div{
    width:calc(50% - 15px);
}
.project:nth-child(even) .splitbox{
    flex-direction: row-reverse;
}
.project .splitbox .imgbox .featimg{
    aspect-ratio:5/3;
    height: 100%;
}
.project .splitbox .txt{
    display: block;
    padding: 30px;
    background: var(--cream);
}
.project:hover .button{
    background: var(--green);
}

.project .splitbox .imgbox{
    overflow: hidden;
}
.project .splitbox .featimg{
    transition: all .4s cubic-bezier(.36,.28,.29,1);
}
.project .splitbox:hover .featimg{
    transform: scale(1.1);
}
/*Article*/
.single:not(.single-project) #content{
    padding:0 30px;
}
#article .section{
    display: block;
    background: var(--cream);
    margin-bottom:30px;
}

#article .head{
    display: block;
    position: relative;   
    margin-bottom: 30px; 
}
#article .head picture{
    padding-top:0;
    aspect-ratio:4/1.5;
    z-index: 0;
}
#article .head .txt{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding:0 0 40px;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    z-index: 10;
    color: #fff;
    background: linear-gradient(rgba(0,0,0,0.0)55%, rgba(0,0,0,0.6) );
    
}
#article .post-content{
    position: relative;
}
#article .headbox{
    margin: 0;
    color: #fff;
    position: absolute;
    bottom:calc(100% + 90px);
    z-index: 100;
}
#article .headbox h1{
    margin: 0;
}

#article .frame{
    display: flex;
    justify-content: space-between;
    width:100%;
    padding:30px 0;
    
}


#article .frame .post-content{
    width:calc(100% - 480px);
    max-width: 760px;
}
#article .frame .sidebar{
    width:450px;
}
#articleFooter{
    margin: 50px auto;
}
#article #articleFooter .sharebox{
    margin-bottom: 100px;
    display: flex;
    align-items: center;
    z-index: 0;
}

/*Article sidebar*/
.newslist.three-col{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap:30px;
    margin:30px 0;
}
.newslist .article{
    display:block;
    padding:0;
    margin: 0 0 30px;
    
}
.newslist .article .featimg{
    padding-top:70%;
}
.newslist .article .featimg .button{
    position: absolute;
    right:10px;
    bottom:10px;
}
.sidebar .article .button,
.newslist.three-col .button{
    position: absolute;
    right:30px;
    top:-90px;
}
.sidebar .article:hover .button,
.newslist.three-col a:hover .button{
    background: var(--green);
}
.sidebar .article .button svg,
.newslist .button svg{
    width:20px;
    height: 16px;
}
.sidebar .article .txtbox,
.newslist.three-col .txtbox{
    position: relative
}
.newslist .article .date{
    
}
.newslist .article h3{
    margin: 0;
}
.article .date{
    color:inherit;
    font-weight: 400;
    margin:0 0 5px;
}
.article:hover .date{
    color: var(--green);
}
.article .imgbox{
    overflow: hidden;
}
.article .featimg{
    transition: all .4s cubic-bezier(.36,.28,.29,1);
}
.article:hover .featimg{
    transform: scale(1.1);
}






.rte hr{
    border:0;
    background:#444;
    margin: 50px 0;
    height: 1px;
}

/*.columns .rte *{
    max-width:100%;
}
.columns .rte p{
    margin: 30px 0;
}
.columns > div{
    padding-top: 10px;
}
.columns .txt1{
    position: sticky;
    align-self: start;
    top:0;
}
.columns .info:nth-child(1){
    animation-delay: var(--delay);
}
.columns .info:nth-child(2){
    animation-delay: calc(var(--delay) + 0.4s);
}
.columns .info:nth-child(3){
    animation-delay: calc(var(--delay) + 0.8s);
}
.columns .info:nth-child(4){
    animation-delay: calc(var(--delay) + 1.2s);
}
.columns .info:nth-child(5){
    animation-delay: calc(var(--delay) + 1.6s);
}
.columns .info:nth-child(6){
    animation-delay: calc(var(--delay) + 2s);
}
*/



/*--------------------------------------------------------------------------- ProjectList */
.tax-sector #content,
.post-type-archive-project #content{
    padding-top:120px;
}
#ProjectList{
    display: block;
    padding: 0 30px;
}
#ProjectList .intro{
    display: block;
    max-width:850px;
    margin:0 auto 120px;
    text-align: center;
}

#ProjectList .sticky-split{
    margin: 0 0 30px;
}
#ProjectList .sticky-split .sticky-side {
	top: 120px;
	min-height: 60vh;
	width: 300px;
	height: auto;
}
#ProjectList .sticky-split .scroll-side{
    display: block;
    /*border: 1px dashed #ccc;*/
    width:calc(100% - 330px);
}

.sticky-side ul.terms li{
    width:100%;
    margin: 0 0 10px;
    justify-content: flex-end;
}
.sticky-side ul.terms li.filter{
    margin-bottom: 30px;
}
/*--------------------------------------------------------------------------- property */
.single-project #content{
    padding-top:0;
}
#property{
    padding: 0 30px;
}

.property-head{
    position: relative;
    display: block;
    margin: 0 0 30px;
    z-index: 0;
}
.property-head .txt{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding:0 0 40px;
    position: absolute;
    bottom:0;
    left:0;
    width:100%;
    height: 60%;
    z-index: 10;
    color: #fff;
    background: linear-gradient(rgba(0,0,0,0.0)55%, rgba(0,0,0,0.6) );
}
.property-head .imgblock{
    
}
.property-head .imgblock picture{
    padding:0;
    aspect-ratio:16/7;
}



#property .splitbox{
	flex-wrap: wrap;
	align-content: center;
    min-height: unset;
    margin-bottom:30px;
}

#property .splitbox .main{
    display: block;
    width:calc(100% - 500px);
    padding: 0 40px 0;
}
#property .splitbox .side{
    display: block;
    width:500px;
}
#property .splitbox .main .txt{
    display: block;
    max-width:850px;
    margin:0;
}
#property .back{
    margin:60px 0;
}
#property .side .infobox{
    display: block;
    padding: 30px;
    background: var(--cream);
}
#property .infobox .info{
    margin:0 0 30px;
}
#property .infobox h6{
    margin-bottom:5px;
}
#property .side .awards{
    display: block;
    padding: 30px;
    margin: 30px 0 0;
    background: var(--green);
    color:#fff;
}
/*--------------------------------------------------------------------------- Slider */

#page_project_info{
    
}
#property h1{
    position: absolute;
    top:-120px;
    color: #fff;
    z-index: 5000;
}
#property .bx-wrapper{
    display: flex;
}
#property .bx-viewport {
	/*width:calc(100% - 230px);*/
    width:100%;
}
#property .bxslider li{
	background: none;
}
#property .bxslider .imgblock{
   /* width:auto !important;*/
}
#property .bxslider picture{
    padding: 0;
}
#property .bxslider img {
	/*height: calc(100vh - 160px);
	width: auto;*/
	position: relative;
}
#property .bx-wrapper .bx-controls {
	width: 150px;
	height: 30px;
	position: absolute;
	z-index: 1000;
	bottom: 40px;
	right: 5%;
}
#property .bx-wrapper .bx-controls-direction a:hover,
#property .bx-wrapper .bx-controls-direction a {
	width:50px;
	height:50px;
	top:calc(50% - 25px);

}
#property .bx-wrapper .bx-controls-direction .bx-prev{
	left:0;
    background:url('../img/next_alt.svg') center / contain no-repeat;
    transform: scaleX(-1);
}
#property .bx-wrapper .bx-controls-direction .bx-next{
	right:0;
    background:url('../img/next_alt.svg') center / contain no-repeat;
}
#property .bx-wrapper .bx-controls-direction .bx-prev:hover,
#property .bx-wrapper .bx-controls-direction .bx-next:hover{
	background-image:url('../img/next_alt_hover.svg');
    
}
#property .bx-wrapper .bx-pager{
	display: none;
}
/*related projects*/
#property .related-projects .section-title{
    text-align: center;
    margin-bottom: 30px;
}
#property .project-list{
    display: grid;
    grid-template-columns:repeat(3,1fr);
    grid-gap:30px;
    flex-wrap: wrap;
}
#property .project-list .project{
    display: block;
    text-align: left;
    background:var(--cream);
}

#property .project .txt{
    margin:0;
    padding: 30px;
    border-top:30px solid #fff;
    
}
#property .project .featimg{
    padding-top:70%;
}
#property .project .txt .h6{
    margin: 0;
}
/*------------------aboutUs*/
.page-id-31 #content{
    padding-top:0;
}
#aboutUs{
    display: block;
    margin: 0 30px 30px;
}
#aboutUs .container{
    padding: 0;
}
#about_s1{
    display: block;
    background:var(--cream);
    padding: 30px;
    margin: 0 0 30px;
}

#about_s1 .splitbox{
    align-items: center;
}
#about_s1 .splitbox .txt{
    display: block;
    max-width: 650px;
    padding-right:30px;
}
#about_s1 .imgbox img{
  width:100%;
}
#about_s2{
    display: block;
    padding:0 30px;
    margin: 0 0 30px;
}
#about_s2 .splitbox{
    align-items: center;
    flex-direction: row-reverse;
}
#about_s2 .splitbox .txt{
    
    padding:30px;
}
#about_s2 .txt .rte{
    display: block;
    max-width: 600px;
}
#about_s2 .imgbox img{
  width:100%;
}
#about_s3 {
    display: block;
    padding: 30px;
    margin:120px 0 90px;
}
#about_s3 .txt{
    display: block;
    max-width: 1024px;
    margin: 0 auto;
    text-align: center;
}
#about_s3 .txt h2 strong{
    color: var(--green);
    font-weight: 300;
}

#about_s4{
    display: block;
    background:var(--purple);
    color: #fff;
    padding: 30px;
    margin: 0 0 30px;
}

#about_s4 .splitbox{
  
}
#about_s4 .splitbox > div{
    width:calc(50% - 15px);
}
#about_s4 .left-col img{
    margin-bottom: 30px;
    width:100%;
}

#about_s4 .right-col{
    display: flex;
    flex-direction: column-reverse;
}
#about_s4 .right-col img{
    margin-top: 30px;
    width:100%;
}
#about_s4 .left-col .txt,
#about_s4 .right-col .txt{
    display: block;
    max-width:650px;
}
#quote_box{
    display: block;
    background:var(--green);
    color: #fff;
    padding: 70px 30px 60px 6%;
    margin: 0 0 30px;
}
/*quotes*/
#quote_box .splitbox{
    justify-content: flex-start;
}
#quote_box .splitbox .imgbox{
    display: block;
    width:70px;
    height: 70px;
    margin-right:60px;
    color: var(--purple);
}
#quote_box .imgbox svg{
    width:100%;
    height: 100%;
}
#quote_box .splitbox blockquote{
    display: block;
    width:calc(100% - 140px);
    max-width:890px;
}

#quote_box blockquote cite span{
    display: block;
    font-weight:400;
    font-style: normal;
    margin: 0;
}

#about_s6{
    display: block;
    background:var(--cream);
    padding:60px 30px 30px;
    margin: 0 0 30px;
}

#about_s6 .head{
    text-align:center;
    margin-bottom: 60px;
    display: block;
}

#about_s6 .people{
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 -15px;
}

.person{
    display: block;
    width:calc(20% - 30px); 
/*    border:1px dashed #ccc;*/
    margin: 0 15px 30px;

}

.person:nth-child(5n+1) .biolink{
    animation-delay: var(--delay);
    
}
.person:nth-child(5n+2) .biolink{
    animation-delay: calc(var(--delay) + 0.4s);
}
.person:nth-child(5n+3) .biolink{
    animation-delay: calc(var(--delay) + 0.8s);
}
.person:nth-child(5n+4) .biolink{
    animation-delay: calc(var(--delay) + 1.2s);
}
.person:nth-child(5n+5) .biolink{
    animation-delay: calc(var(--delay) + 1.6s);
}
/*.person:nth-child(6){
    animation-delay: calc(var(--delay) + 2s);
}*/
.person > a.biolink{
    display: block;
    padding:20px;
    text-align: center;
}
.person .biolink .imgbox{
    max-width:180px;
    display: block;
    margin: 0 auto;
}
.person .biolink .featimg{
    padding-top:100%;
    margin-bottom: 20px;
}
.person .biolink img{
    border-radius: 50%;
    border:4px solid #fff;
}
.person:hover .biolink img{
    border-color: var(--green);
}
.person .biolink h3{
    margin-bottom: 10px;
}
/*pop-up*/
.person.active{
    
}
.person .profile{
    opacity: 0;
    visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height: 100%; 
    background: #0009;
    overflow: auto;
    padding: 30px;
    margin: 0;
    z-index: 95000;
    overscroll-behaviour:contain;
    transition: opacity .4s cubic-bezier(.36,.28,.29,1) 0.1s;
    
}

.person.active .profile{
    /*transform: translateX(-100%);*/
    opacity: 1;
    visibility: visible;
}
.profile .splitbox{
    max-width:850px;
    background: #fff;
    padding: 30px;
    height: auto;
}

.profile .splitbox .imgbox{
    width:230px;
}
.profile .splitbox .imgbox .featimg{
    padding-top: 120%;
}
.profile .splitbox .imgbox .featimg img{
    height: 100%;
}
.profile .splitbox .txtbox{
    width:calc(100% - 260px);
}
.profile .splitbox .txtbox .name{
    margin-bottom: 0;
}
.profile .splitbox .txtbox .title{
    margin-bottom:50px;
}
.profile .splitbox .txtbox .close{
    margin:50px 0 0;
}
.profile .biolink{
    position: initial;
}
.profile .biolink:before{
    content:"";
    display: block;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    z-index: -1;
}




/*Social responsiblity*/
.page-id-2166 #content{
    padding-top:0;
}
#soc_rep{
    padding: 0 30px 30px;
}
#soc_rep .head{
    display: block;
    position: relative;   
    margin-bottom: 30px; 
}
#soc_rep .head picture{
    padding-top:0;
    aspect-ratio:4/1.5;
}
#soc_rep_s1{
    display: block;
    max-width: 860px;
    text-align: center;
    margin: 0 auto 30px;
}
#soc_rep_s1 .txt{
    display: block;
    padding: 30px 0 60px;
}

#soc_rep_s2{
    display: block;
    background:var(--cream);
    padding: 30px;
    margin: 0 0 30px;
}
#soc_rep_s2 .splitbox{
    flex-direction: row-reverse;
}
#soc_rep_s2 .txt{
    padding-right:30px;
    width:40%;
}
#soc_rep_s2 .imgbox{
    width:60%;
}
#soc_rep_s2 .featimg{
    padding-top:0;
    aspect-ratio:4/2;
}

#soc_rep_s2 .four_colm{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 70px 0 60px;
}

.four_colm > h2{
    width:100%;
    text-align: center;
    margin-bottom: 30px;
}
.four_colm .colm{
    display: block;
    width:25%;
    padding: 0 30px;
    text-align: center;
}
#soc_rep_s6,
#soc_rep_s3{
    display: block;
    padding: 30px;
    margin: 0 0 30px;
}
#soc_rep_s3 .splitbox{
    
}
#soc_rep_s3 .splitbox > div{
    width:calc(50% - 15px);
}
#soc_rep_s3 .block2,
#soc_rep_s3 .block1{
    padding-right:10%;
    margin-bottom: 30px;
}
#soc_rep_s3 .block3{
    
}

#soc_rep_s3 .block3 h2{
    color:var(--green);
    max-width:630px;
}
#soc_rep_s4{
    display: block;
    margin: 0 0 30px;
}
.stats{
    display: flex;
    justify-content: space-between;
    width:100%;
    background:var(--purple);
    color:#fff;
    padding:60px 30px;
}
.stats .stat{
    display: flex;
    padding: 2%;
    width:24%;
    color:#fff;
}
.stat:nth-child(1){
   animation-delay: 0s; 
}
.stat:nth-child(2){
   animation-delay: 0.5s; 
}
.stat:nth-child(3){
   animation-delay: 1s; 
}
.stat:nth-child(4){
   animation-delay: 1.5s; 
}
.stat .title{
    display: block;
    margin: 0 0 5px;
}
.stat .number{
    display: block;
    font-weight: 400;
    font-size: 62px;
    line-height: 62px;
    margin: 0 0 10px;
}
.stat .icon{
    display: block;
    padding-right: 10px;
    min-width:70px;
}
.stat:hover *{
    color:var(--green);
}

#soc_rep_s5{
    display: block;
    background:var(--purple);
    color:#fff;
    padding:30px;
    margin: 0 0 30px;
}
#soc_rep_s5 .splitbox > div{
    width:calc(50% - 15px);
}
#soc_rep_s5 .imgbox img{
    width:100%;
}
#soc_rep_s5 .txt .rte {
    max-width:600px;
}
#soc_rep_s7{
    display: block;
    background:var(--cream);
    padding: 30px;
    margin: 0 0 30px;
}
#soc_rep_s7 > .splitbox{
    flex-direction: row-reverse;
}
#soc_rep_s7 .splitbox > div{
    width:calc(50% - 15px);
}
#soc_rep_s7 .splitbox .txt{
    max-width: 580px;
}
#soc_rep_s7 .splitbox .col1 img:first-child{
    margin-bottom: 30px;
}
#soc_rep_s7 .splitbox .imgbox img{
    width:100%;
}
#soc_rep_s8{
    display: block;
    padding: 30px;
    margin: 0 0 30px;
}
#soc_rep_s8 .bx-wrapper{
    max-width:100% !important;
}
#soc_rep_s8 ul.bxslider{
    display: flex;
}
#soc_rep_s8 ul.bxslider li {
	display: flex;
	align-content: center;
	justify-content: center;
	align-self: center;
}

#soc_rep_s9{
    display: block;
    background: var(--cream);
    padding:0;
    margin: 0;
}
#soc_rep_s9 .splitbox{
    align-items: center;
}
#soc_rep_s9 .splitbox .imgbox{
    width:110px;
    padding-left:30px;
}

#soc_rep_s9 .splitbox .txt{
    width:calc(100% - 130px);
    padding:30px 0;
    padding-right:30%;
    position: relative;
}
#soc_rep_s9 .splitbox .button{
    position: absolute;
    right:30px;
    bottom:0;
    top:0;
    margin: auto;
    height: 44px;
}
#soc_rep_s9 .splitbox .txt h2{
    margin: 0 0 10px;
}
/*--------------------------------------------------------------------------- Accordions */
.accordion_frame {
	display:block;
	margin:0;
    padding: 60px 0 0;
}

.accordion {
	display:block;
	margin:0 0 30px;
}
.accordion:last-child{
    margin: 0;
}
.accordion_title {
    display: flex;
    justify-content:space-between;
    align-items: center;
	cursor:pointer;
	padding:0 0 10px 0;
	margin:0;
    border-bottom:1px solid #fff;
}
.accordion_title::after{
    content: "+";
    margin-left: 15px;
    font-size: 30px;
    line-height: 30px;
    font-weight: 300;
}
.accordion.active .accordion_title::after{
    content:"-";
    font-size: 60px;
}
/*.accordion.active .accordion_title{
    color:var(--green);
}*/


.accordion_title svg {
	display: block;
	float: right;
	/*width: 24px;*/
	height: 14px;
	top: 20px;
	position: relative;
}
.accordion.active .accordion_title svg{
    transform:scaleY(-1);
}
.accordion_content {
	padding:20px 0 0;
	display:none;
    align-items: flex-start;
	flex-wrap: wrap;
    justify-content: space-between;
}

.accordion.active .accordion_content {
	display: flex;
	max-width: 1024px;
	margin: 0 auto;
}
.accordion_content .imgbox{
    width:30%;
}
.accordion_content .imgbox .featimg{
    padding-top: 130%;
}
.accordion_content .profile {
	width: 65%;
}

/*dp library*/
#dp_library{
    opacity: 0;
    visibility: hidden;
	display: flex;
    justify-content: center;
	align-items: flex-start;
	position: fixed;
	top: 0;
	left:0;
	width: 100%;
	height: 100%;
	background: #0009;
	overflow: auto;
	padding: 30px;
	margin: 0;
	z-index: 95000;
	overscroll-behaviour: contain;
	transition: opacity .4s cubic-bezier(.36,.28,.29,1);
}
#dp_library.active{
    opacity: 1;
    visibility: visible;
}
#dp_library library-button::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
#dp_library .txtbox {
	max-width: 850px;
	background: #fff;
	padding: 30px;
	height: auto;
	display: block;
	width: 100%;
}
#dp_library p.close{
    margin: 30px auto 0;
    text-align: center;
}
#dp_library p.close .button{
    position: static;
}
#dp_library p.close .button:before{
    content:"";
    display: block;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height: 130%;
    z-index: -1;
}
.library_section{
    display: block;
    margin: 40px 0 0;
    border-bottom:1px solid #e6e5e6;
}
.library_section h6{
    color:var(--green);
    margin-bottom: 30px;
}
.library_section .document{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 30px;
}
.library_section .download{
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    border-bottom: 1px solid #000;
}
.library_section .download svg{
    width:12px;
    height:12px;
    margin-left:10px;
    transform: rotate(90deg);
}
.library_section .download:hover{
    border-color:var(--green);
}
.library_section p{
    margin: 0;
}

/*--------------------------------------------------------------------------- Frameworks */
#frameworks{
    display:block;
    padding: 0 30px;
}
#frameworks .head picture {
	padding-top: 0;
	aspect-ratio: 4/1.5;
}
#frameworks .content-frame{
    display: block;
    max-width:1026px;
    margin: 0 auto;
}

#frame_1{
    display: block;
    background:var(--cream);
    padding:60px 30px 30px;
    margin: 0 0 30px;
}
#frame_1 .intro-txt{
    display: block;
    margin-bottom: 60px;
}
#frame_1 .splitbox{
    border-top:1px solid var(--mid-grey);
    padding: 30px 0;
}
#frame_1 .splitbox .imgbox{
    width:240px;
}
#frame_1 .splitbox .imgbox .featimg{
    padding-top:0;
    height: 150px;
}
#frame_1 .splitbox .txt{
    width:calc(100% - 270px);
}

#frame_2{
    display: block;
    background:var(--cream);
    padding:30px;
    margin: 0 0 30px;
}
#frame_2 .splitbox:nth-child(1){
    flex-direction: row-reverse;
    margin-bottom: 30px;
}
#frame_2 .splitbox .txt{
    width:calc(45% - 15px);
    
}
#frame_2 .splitbox .txt .rte{
    max-width: 600px;
}
#frame_2 .splitbox .imgbox{
    width:calc(55% - 15px);
}
#frame_2 .splitbox .imgbox img{
    width:100%;
}
/*--------------------------------------------------------------------------- Careers */
#careers .txtbox.intro{
    display: block;
    margin: 0 auto 60px;
    max-width: 860px;
    text-align: center;
}
#careers .txtbox.intro h1{
    margin-bottom: 30px;
}
#careers .about-us{
    display: block;
    padding: 60px 30px 1px;
    background: var(--cream);
}
#careers .about-us .splitbox{
    max-width: 1280px;
    margin: 0 auto 30px;
}
#careers .about-us .splitbox:nth-child(even){
    flex-direction: row-reverse;
}
#careers .about-us .imgbox{
    width:55%;
}
#careers .about-us .imgbox img{
    width:100%;
}
#careers .about-us .txtbox{
    width:calc(45% - 30px);
}
/*#careers .about-us .splitbox .txtbox h2{
    margin-bottom: 20px;
}*/

#careers .v_iframe {
	max-width: 1280px;
	margin: 30px auto;
	aspect-ratio: 16/9;
	padding: 0;
}

#careers .join-us{
    display: block;
    margin: 30px auto;
    background: var(--purple);
    color:#fff;
}
.join-us .splitbox .imgbox{
    width:30%;
}
.join-us .splitbox .imgbox img{
    width:100%;
    max-height:180px;
    object-fit: cover;
}
.join-us .splitbox .txtbox{
    width:70%;
    padding: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    
}
.join-us .splitbox .txtbox .txt{
    width:100%;
    max-width:450px;
}
.join-us .splitbox .txtbox .txt h2{
    margin: 0;
}
.join-us .splitbox .txtbox .button.recruit{
    
}


/*--------------------------------------------------------------------------- Newsletter Page */
#newsletter-frame{
    display: block;
    padding: 0 30px 30px;
}
#newsletter-frame .splitbox .txt{
    padding: 30px;
    display: flex;
    min-height: calc(100vh - 90px);
    flex-direction: column;
    justify-content: center;
    background: var(--green);
    color:#fff;

}
#newsletter-frame .txt .rte{
    display: block;
    max-width: 500px;
    margin: 0 auto;
}
#newsletter-frame .imgbox picture{
    height: 100%;
}
#newsletter-frame .rte h2{
    max-width: 450px;
}
/*--------------------------------------------------------------------------- xxx */
/*--------------------------------------------------------------------------- xxx */
/*--------------------------------------------------------------------------- xxx */

/*----------------------------------------------------------------------------------------------------------------------- Begin Responsive Queries*/

/* ----------------------------------------------------------------------- Min Withs Smallest to largest */
@media only screen and (min-width: 768px) {
    
}
@media only screen and (min-width: 1024px) {
    

}
@media only screen and (min-width: 1280px) {
    #navframe ul.nav-menu {
         flex-wrap: nowrap; 
    }
    .nav-menu > li{
        /*min-width: 80px;*/
        margin:0 0 0 30px;
    }
    .nav-menu > li.socials{
        display: none;
    }
    .nav-menu > li a{
        display: block;
        text-align: center;
        white-space: nowrap;
    }
    .home #masthead:not(.docked) .nav-menu > li > a{
        color: #fff;
    }
    .nav-menu > li > a:hover::after {
        width:100%;
    }
    
}
@media only screen and (min-width: 1440px) {

}
@media only screen and (min-width: 1680px) {
    
}
@media only screen and (min-width: 1720px) {
    #property .splitbox .main .txt {
        margin-left: 2%;
    }
}
@media only screen and (min-width: 1920px) {
    #property .splitbox .main .txt {
        margin-left: 5%;
    }
    #property .back p{
        margin-left:4%;
    }
}

/* ----------------------------------------------------------------------- MAX Withs Largest to smallest */
@media only screen and (max-width: 1919px) {
    
}
@media only screen and (max-width: 1679px) {
    
}
@media only screen and (max-width: 1439px) {
    
    
}
@media only screen and (max-width: 1279px) {
	
    #masthead{
        padding: 0;
        height: 60px;
        align-items: flex-start;
    }
    #wrapper.active #masthead{
        background: #fff;
    }

    #masthead.docked {
        padding: 0;
        height: 60px;
        background: #fff;
    }
    #menu_icon{
        top:16px;
        right:30px;
    }
    #masthead .menu-icon span{
        background: var(--purple);
    }
    .menu-icon span:nth-child(1) {
        top: 4px;
    }
    .menu-icon span:nth-child(1) {
        top: 4px;
    }
    .menu-icon span:nth-child(2), 
    .menu-icon span:nth-child(3) {
        top: 50%;
    }
    .menu-icon span:nth-child(4){
        width:60%;
        left:40%;
        bottom:2px;
    }
    #wrapper.active #masthead .menu-icon span{
        background: var(--green);
    }
    .home #masthead:not(.docked) .menu-icon span{
        background: #fff;
    }
    #wrapper.active #masthead #logo,
    #logo{
        top:16px;
        bottom:auto;
        width: 70px;
        height: 60px;
        left:30px;
    }
    #masthead.docked #logo {
        width: 40px;
        height: 40px;
        top: 10px;
        
    }
    #navframe {
        position: fixed;
        top:0;
        z-index: 0;
    }
    #navframe ul.nav-menu {
        max-width: 400px;
        margin: 0 auto;
    }
    #navframe .menu-main-menu-container{
        border-top:none;
    }
    .nav-menu > li.socials.hasdrop {
        display: block;
    }
    .nav-menu > li.socials > a{
        display: none;
    }
    .nav-menu > li.socials .sub-menu {
        display: flex;
        margin: 30px 0 0;
        border-bottom: none;
        border-color:#e6e5e6;
    }
    .nav-menu .socials ul li{
        width:40px;
        height: 40px;
        overflow: hidden;
        background: url() center / 80% auto no-repeat;
        text-indent: -9000px;
        margin: 0 20px 0 0;
    }
    .nav-menu .socials ul li.twitter{
        background-image: url('../img/twitter.svg');
    }
    .nav-menu .socials ul li.youtube{
        background-image: url('../img/youtube.svg');
    }
    .nav-menu .socials ul li.linkedin{
        background-image: url('../img/linkedin.svg');
    }
    .nav-menu > li > a::after {
        height: 0px;
        width: 3px;
        background: var(--green);
        transition: width ease-in-out 0.2s;
        position: absolute;
        margin: 0;
        top: 0;
        left: -15px;
    }
    .single-project li.projects > a::after, .tax-sector li.projects > a::after, .nav-menu li.current_page_item > a::after, .nav-menu li.current_page_parent > a::after, .nav-menu > li.current-menu-item > a::after, .nav-menu > li.current-page-ancestor > a::after {
        height: 100%;
        width:3px;
    }
    .post-type-archive-project li.news > a::after, .tax-sector li.news > a::after, .single-project .nav-menu li.news > a::after {
        height: 0%;
        width:3px;
    }
    
    
    #main {
        padding-top: 60px;
    }
    /*type*/
     .h1,
    h1 {
      font-size: 36px;
      line-height: 42px;
    }
    .h2,
    h2 {
      font-size: 28px;
      line-height:32px;
    }
    .h3,
    h3 {
      font-size: 20px;
      line-height:24px;
    }
    body,
    p {
        font-size: 16px;
        line-height: 24px;
    }
    /*home*/
    #home_intro{
        margin-top:-60px;
    }
    #quote_box {
        padding: 70px 30px 60px;
    }
    .stats {
        padding: 40px 30px;
    }
    .stats .stat {
        padding: 0;
    }
    .stat .number {
        font-size: 48px;
        line-height: 48px;
        margin: 0;
    }
    
    /*project list*/
    .project .splitbox > div {
        width: 50%;
    }
    #ProjectList .sticky-split .sticky-side {
        width: 260px;
    }
    #ProjectList .sticky-split .scroll-side {
        width: calc(100% - 280px);
    }
    /*project details*/
    #property h1 {
        top: -90px;                
    }
    #property .project .txt {
        border-top:none;
    }
    #property .bx-wrapper .bx-controls {
        bottom: 10px;
    }
    .property-head .txt{
        padding-bottom: 0;
    }
    #property .splitbox .main {
        width: calc(100% - 400px);
        padding: 0 30px;
    }
    #property .splitbox .side {
        width: 400px;
    }
    /*project info*/
    #property .back {
       padding: 0;
    }
    /*blog list*/
    #bloglist {
        padding: 80px 0 0;
    }
    #bloglist .splitbox .imgbox,
    #bloglist .splitbox .txtbox {
        width: 50%;
       
    }
    /*single article*/
    #article .head h1,
    #article .frame .post-content {
        width: calc(100% - 300px);
    }
    #article .frame .sidebar {
        width: 270px;
    }
    
    
}

@media only screen and (max-width: 1023px) {
    
    
    #masthead {
        padding: 0;
    }
        
    #footer {
        padding: 100px 0 60px;
    }
    
        
    /*navigation*/
    #navframe .menu-main-menu-container {
        padding:120px 30px 30px;
    }
    .nav-menu > li > a {
        font-size: 26px;
        line-height: 40px;
        font-weight: 400;
    }
    .nav-menu > li.current-menu-item > a, 
    .nav-menu > li.current-page-ancestor > a, 
    .nav-menu li.current_page_item > a, 
    .nav-menu li.current_page_parent > a {
        border-color: var(--green);
    }
    .single-projects .nav-menu li.projects > a:before,
    .nav-menu > li.current-menu-item > a::before, 
    .nav-menu > li.current-page-ancestor > a::before, 
    .nav-menu li.current_page_item > a::before, 
    .nav-menu li.current_page_parent > a::before {
        background: var(--green);
        top:0;
        bottom:0;
        margin: auto;
        left:-20px;
        width:8px;
        height: 8px;
        display: none;
    }

    .post-type-archive-projects li.news > a,
    .single-projects .nav-menu li.news > a,
    .single-projects .nav-menu li.current_page_parent > a{
        color: var(--green);
    }
    .single-projects .livesite .nav-menu li.live > a,
    .single-projects .normal .nav-menu li.projects > a{
        color: #fff;
    }
    /*buttons*/
    .button{
        height: 33px;
        border-radius: 33px;
        padding: 0 15px;
    }
    .button.narrow {
        padding: 0 10px;
        height: 33px;
    }
    
    .sidebar .article .button, 
    .newslist.three-col .button {
        position: absolute;
        right: 10px;
        top: -60px;
    }
    .sidebar .article .button svg, 
    .newslist .button svg {
        width: 14px;
        height: 16px;
    }
    .button.maplink {
        min-height: 33px;
        border-radius: 33px;
        height: auto;
        min-width: unset;
    }
    .button.maplink svg{
        margin: 0 5px 0 0;
    }
    /*footer*/
    .footer-col > div {
        width: 50%;
    }
    
    
    .footer-col .col-three{
        width:100%;
        margin:30px 0;
    }
    .col-three .icon-grid {
        margin:30px 0 0;
        grid-template-columns: repeat(4,1fr);
    }
    #footer .copyright{
        margin:60px 0 0;
    }
    /*home*/
    #home_intro {
        min-height: unset;
        height: 70vh;
    }
    #home_intro .splitbox {
        color: #fff;
        flex-direction: column;
        justify-content: flex-end;
    }
    #home_intro .splitbox > div {
        padding: 0 30px 30px;
        width: 100%;
    }
    #home_intro .tagline {
        max-width: 500px;
        width:80%;
    }
    #home_intro h1{
        max-width:80%;
    }
    #home_projects .term .button {
        bottom: 10px;
        left: 10px;
    }
    
    #content .delay1{
        animation-delay: var(--delay);
    }
    #content .delay2{
        animation-delay: calc(var(--delay) + 0.4s);
    }
    .stats {
        flex-wrap: wrap;
        padding-bottom: 1px;
    }
    .stats .stat {
        padding:0 2%;
        width: 50%;
        margin-bottom: 30px;
    }
    #home_news {
        padding:0;
    }
    .newslist.three-col {
        margin: 30px 0 0;
    }
    p.cta.center {
        margin: 0 auto;
    }
    #home_clients {
        padding: 0;
    }
    /*footer*/
    #footer {
        padding: 80px 0 60px;
    }
    /*about us*/
    #about_s1 {
        padding:60px 30px 30px;
    }
    #about_s1 .splitbox{
        flex-direction: column;
    }
    #about_s1 .splitbox .imgbox{
        width:100%;
        max-width: unset;
        padding: 0;
    }
    #about_s1 .splitbox .txt{
        width:100%;
        max-width: unset;
        padding: 0;
        margin-bottom: 30px;
    }
    #about_s2{
        margin: 0;
    }
    #about_s2 .splitbox{
        flex-direction: column-reverse;
    }
    #about_s2 .splitbox .txt{
        width:100%;
        padding: 30px 0;
        animation-delay: calc(var(--delay) + 0.2s);
    }
    #about_s2 .txt .rte {
        max-width:unset;
    }
    #about_s2 .splitbox .imgbox{
        width:100%;
        animation-delay: var(--delay);
    }
    
    #about_s3.container {
        padding: 30px;
        margin:30px 0;
        text-align: center;
    }
    #about_s3 .container {
        padding: 0;
    }
                                    
    #about_s4 .splitbox {
        flex-direction: column-reverse;
    }
    #about_s4 .splitbox .left-col{
        margin-top: 30px;
    }
    #about_s4 .splitbox > div {
    width: 100%;
    }
    #about_s6 .person {
        width: calc(33% - 30px);
    }
    
    .person:nth-child(3n+1) .biolink{
        animation-delay: var(--delay);
    }
    .person:nth-child(3n+2) .biolink{
        animation-delay: calc(var(--delay) + 0.4s);
    }
    .person:nth-child(3n+3) .biolink{
        animation-delay: calc(var(--delay) + 0.8s);
    }
    /*project list*/
    #ProjectList .sticky-split {
        flex-direction: row;
    }
    #ProjectList .sticky-side{
        position: sticky;
    }
    .project .splitbox {
        display: block;
    }
    .project .splitbox > div{
        width:100%;
    }
    /*project details*/
    #property .splitbox .side {
        width: 300px;
    }
    #property .splitbox .main {
        width: calc(100% - 300px);
        padding-left:0;
    }
    .property-head {
        margin: 0 -30px 30px;
    }
    .property-head .imgblock picture {
        aspect-ratio: 16/9;
    }
    #property .bx-wrapper .bx-controls {
        width: 120px;
    }
    #property .back {
        margin: 30px 0 60px;
    }
    #property .project-list {
        grid-template-columns: repeat(2,1fr);
    }
    #property .project-list .project {
        animation-delay: var(--delay);
    }
    #property .side .infobox,
    #property .side .awards{
        animation-delay: var(--delay);
    }
    /*social respons*/
    #soc_rep_s2 .splitbox{
        flex-direction: column-reverse;
    }
    #soc_rep_s2 .txt {
        padding: 30px 0;
        width: 100%;
    }
    #soc_rep_s2 .imgbox {
        width: 100%;
    }
    #soc_rep_s2 .four_colm {
        margin: 70px -30px 30px;
    }
    .four_colm .colm {
        width: 50%;
        padding: 0 30px;
        margin: 0 0 30px;
    }
    #soc_rep_s3 {
        margin: 0;
    }
    #soc_rep_s3 .splitbox > div {
        width: 100%;
    }
    #soc_rep_s3 .block2, 
    #soc_rep_s3 .block1 {
        padding-right: 0;
        margin-bottom: 30px;
    }
    #soc_rep_s3 .block3 h2 {
        max-width: unset;
    }
    #soc_rep_s5 .splitbox{
        flex-direction: column;
    }
    #soc_rep_s5 .splitbox > div {
        width: 100%;
    }
    #soc_rep_s5 .splitbox .txt{
        padding-top:30px;
    }
    #soc_rep_s7 > .splitbox {
        flex-direction: column-reverse;
    }
    #soc_rep_s7 > .splitbox > div{
        width:100%;
    }
    #soc_rep_s7 > .splitbox > .txt{
        margin-bottom: 30px;
        max-width: unset;
    }
    /*single article*/
    #article .frame{
        flex-direction: column;
    }
    #article .head h1,
    #article .frame .post-content{
        width: 100%;
    }
    #article .frame .sidebar {
        width: 100%;
    }
    #article .head picture {
        aspect-ratio: 4/3;
    }
    .txt.sharebox {
        margin: 30px 0 0;
    }
    /*careers*/
    #careers{
        padding:120px 30px 0;
    }
    #careers .about-us {
        padding: 30px;
    }
    #careers .about-us .splitbox {
        flex-direction: column;
    }
    #careers .about-us .imgbox {
        width: 100%;
    }
    #careers .about-us .txtbox {
        width: 100%;
        padding: 30px 0;
    }
    .join-us .recruit{
        margin: 30px 0 0;
    }
    .join-us .splitbox .imgbox img {
        max-height: unset;
        height: 100%;
    }
    /*newsletter*/
    #newsletter-frame .splitbox {
        flex-direction: column;
    }
    #newsletter-frame .splitbox .imgbox {
        width: 100%;
    }
    #newsletter-frame .splitbox .txt {
        width: 100%;
        min-height: unset;
        padding: 60px 30px;
    }
    
    
    
    
}

@media only screen and (max-width: 767px) {
    #wrapper{
        overflow: hidden;
    }
    
    
    /*footer*/
    #footer {
        padding: 60px 0 30px;
    }
    .footer-col{
        flex-direction: column;
    }
    .footer-col > div {
        width: 100%;
        margin-bottom: 60px;
    }
    .icon-grid {
        grid-template-columns: repeat(2,1fr);
    }
    #footer .copyright {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        margin: 30px 0 0;
    }
    #menu-footer-menu{
        margin: 20px 0;
    }
    #menu-footer-menu li {
        margin: 0 15px 0 0;
    }
    /*structure*/
    /*.container {
        padding: 0 20px;
    }*/
    /*sticky-split*/
    .sticky-split{
        flex-direction: column;
        align-items: flex-start;
    }
    .sticky-split .sticky-side {
        flex-direction: column;
        position: relative;
        top: unset;
        height: auto;
        width: 100%;
        padding-bottom: 30px;
    }
    .sticky-split .scroll-side{
        width:100%;
    }
    /*home*/
    #home_projects .scroll-side {
        width: 100%;
    }
    #home_projects .sticky-side {
        width:100%;
        
    }
    #home_about .imgbox {
        width:100%;
        animation-delay:var(--delay);
    }
    #home_about .txt {
        width:100%;
        max-width: unset;
        padding-bottom: 30px;
    }
    /*quotebox*/
    #quote_box {
        padding: 40px 30px 60px;
    }
    #quote_box .splitbox .imgbox {
        width: 60px;
        height: 60px;
        margin:0 0 30px;
    }
    #quote_box .splitbox blockquote {
        width:100%;
    }
    /*newslist*/
    .newslist.three-col {
        grid-template-columns: repeat(1,1fr);
        margin: 30px 0 0;
    }
    /*about us*/
    #about_s6 .person {
        width: calc(50% - 30px);
    }
    
    .person:nth-child(2n+1) .biolink{
        animation-delay: var(--delay);
    }
    .person:nth-child(2n+2) .biolink{
        animation-delay: calc(var(--delay) + 0.4s);
    }
    .profile .splitbox{
        flex-direction: column;
    }
    .person .profile {
        display: block;
    }
    .profile .splitbox{
        max-width: 380px;
        margin: 0 auto;
    }
    .profile .splitbox .imgbox{
        width:100%;
        max-width:unset;
        margin: 0 auto;
    }
    .profile .splitbox .txtbox{
        width:100%;
        max-width:unset;
        margin: 0 auto;
        padding:30px 0;
    }
    .profile .splitbox .txtbox .title {
        margin-bottom: 30px;
    }
    
    /*project list*/
    #ProjectList .intro {
        margin: 0 auto 60px;
    }
    #ProjectList .sticky-split {
        flex-direction: column;
        max-width:450px;
        margin: 0 auto;
        
    }
    #ProjectList .sticky-split .sticky-side{
        position: relative;
        width:100%;
        height: auto;
        top:unset;
        min-height: unset;
    }
    #ProjectList .sticky-split .scroll-side {
        width: 100%;
    }
    .project .splitbox {
        display: block;
        width:100%;
    }
    ul.terms{
        margin-bottom:0;
    }
    /*project details*/
    #property h1 {
        top: unset;
        color: inherit;
        position: relative;
    }
    #property .splitbox{
        flex-direction: column;
    }
    #property .splitbox .main {
        width:100%;
        padding:0 0 30px;
    }
    #property .splitbox .side {
        width:100%;
    }
    #property .project-list {
        grid-template-columns: repeat(1,1fr);
    }
    /*freameworks*/
    #frame_1 {
        padding: 30px;
    }
    #frame_1 .splitbox{
        flex-direction: column;
    }
    #frame_1 .splitbox .imgbox{
        width:100%;
        max-width: 250px;
    }
    #frame_1 .splitbox .imgbox .featimg {
        padding-top: 65%;
        height: auto;
    }
    
    #frame_1 .splitbox .txt{
        width:100%;
        padding: 30px 0 0;
    }
    #frame_1 .intro-txt {                                                               
        margin-bottom: 30px;
    }                                    
    #frame_2 .splitbox:nth-child(1) {
        flex-direction: column-reverse;
        margin-bottom: 30px;
    }
    #frame_2 .splitbox .imgbox {
        width: 100%;
    }
    #frame_2 .splitbox .txt{
        width:100%;
        
    }
    #frame_2 .splitbox .txt .rte.box2 {
        padding: 30px 0 0;
    }
    /*social resp*/
    .four_colm .colm {
        width: 100%;
    }
    #soc_rep_s7 .splitbox .splitbox > div {
        width: calc(50% - 5px);
    }
    #soc_rep_s7 .splitbox .col1 img:first-child {
        margin-bottom: 10px;
    }                             
    #soc_rep_s9{
        padding: 30px;
    }
    #soc_rep_s9 .splitbox .imgbox {
        width: 100%;
        padding-left: 0;
    }
    #soc_rep_s9 .splitbox .txt {
        width: 100%;
        padding: 30px 0;
    }
    #soc_rep_s9 .splitbox .button {
        position: relative;
        right: auto;
        bottom: auto;
        top: auto;
        margin:30px 0 auto;
        height: 44px;
    }
    
    /*blog*/
    #bloglist .splitbox {
        margin: 0 0 30px;
        flex-direction: column;
    }
    #bloglist .splitbox .imgbox{
        width:100%
    } 
    #bloglist .splitbox .txtbox {
        width: 100%;
        padding: 30px 0 0;
    }
    #page_blog ul.terms{
        display: block;
        margin: 0 0 30px;
    }
    #page_blog ul.terms li {
	    display: block;
        margin: 0 0 10px 0;
    }
    /*careers*/
    .join-us .splitbox .imgbox {
        width: 100%;
    }
    .join-us .splitbox .txt,
    .join-us .splitbox .txtbox {
        width: 100%;
        max-width: unset;
    }
    .join-us .splitbox .imgbox img {
        aspect-ratio: 4/2.5;
    }
    /*contact*/

    #contact .splitbox {
        flex-direction: column;
    }
    #contact .splitbox > div {
        width:100%;
    }
    #contact .splitbox .txt1 {
        max-width:unset;
    }
    #contact .splitbox .txt2 {
        padding:30px 0;
        animation-delay: var(--delay);
    }
    #contact .splitbox > .map {
        margin: 0 0 30px;
        animation-delay: calc(var(--delay) + 0.2s);
    }
    
}
@media only screen and (max-width: 599px) {
    #logo{
        left:30px;
        
    }
    #menu_icon{
        right:30px;
    }
	/*Type*/
    .h1,
    h1 {
      font-size: 24px;
      line-height: 30px;
    }
    .h2,
    h2 {
      font-size: 22px;
      line-height:28px;
    }
    .h3,
    h3 {
      font-size: 18px;
      line-height:24px;
    }
    .h6,
    h6 {
        font-size: 10px;
        line-height: 12px;

    }
    body,
    p {
      font-size: 14px;
      line-height: 18px;
    }
    .col-three .icon-grid {
        grid-template-columns: repeat(2,1fr);
    }
    button svg, .button svg {
        height: 14px;
    }
    .newslist .button svg {
        height: 16px;
    }
    /*home*/
    #home_intro h1 {
        max-width: 100%;
    }
    .stats .stat {
        padding: 0;
        width: 100%;
    }
    #home_projects .term .featimg {
        aspect-ratio: 5/3;
    }
    .newslist .article {
        margin: 0;
    }
    #home_clients {
        margin: 30px 0;
    }
    /*about us*/
    #about_s6 .person {
        width: 100%;
        margin: 0 auto 30px;
    }
    .person > a.biolink {
        padding: 0;
    }
    
    .person:nth-child(n) .biolink{
        animation-delay: var(--delay);
    }
    /*frameworks*/
    #frame_1 .splitbox .imgbox{
        max-width:100%;
    }
    /*social resp*/
    #soc_rep_s8 {
        padding: 30px 0;
        margin: 0 -30px 30px 0;
    }
    .library_section .document {
        display: block;
    }
    .library_section .download {
        margin: 10px 0 0;
        display: inline-block;
    }
    /*article*/
    #article .head {
        margin-bottom: 0;
    }
    #article .headbox {
        margin: 0 0 30px;
        color: inherit;
        position: relative;
        bottom: auto;
    }
}
/*iphone6 + regular android*/
@media only screen and (max-width: 479px) { 
    
        
    
}
/*Iphone 4&5*/
@media only screen and (max-width: 359px) { 

}

/* Size and Orientation */
@media only screen and (max-width: 479px) and (orientation: portrait){ 

}
/* Landscape Orientation */
@media screen and (orientation: landscape) {

}

/* Portrait Orientation */
@media screen and (orientation: portrait) {

}

/*--------------------------------------------------------------------- End Responsive Queries*/

/* --------------------------------------------------------------------------------------------------------------------- Animations -------------------- */

	/*----------------------------------------------------------------------------taken from animate.css */
    .wow{
        visibility: hidden;
    }
    .animated {
        opacity: 0;
/*	  -webkit-animation-duration: 1.3s;
	  animation-duration: 1.3s;
	  -webkit-animation-fill-mode: both;
	  animation-fill-mode: both;*/
    }

	@-webkit-keyframes fadeInUp {
	  0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
	  }
	
	  100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	  }
	}
	
	@keyframes fadeInUp {
	  0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
	  }
	
	  100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	  }
	}
	
	.fadeInUp {
	  -webkit-animation-name: fadeInUp;
	  animation-name: fadeInUp;
	}
	
	/*----------------------------------------------------------------------------written by Kolen*/
	.fadeUpSlow {
	  -webkit-animation-name: fadeUpSlow;
	  animation-name: fadeUpSlow;
	  -webkit-animation-duration:0.8s;
	  animation-duration:0.8s;
	  -webkit-animation-count:1;
	  animation-count:1;
	  -webkit-animation-fill-mode:forwards;
	  animation-fill-mode:forwards;
	}
	.fadeDownSlow {
	  -webkit-animation-name: fadeDownSlow;
	  animation-name: fadeDownSlow;
	  -webkit-animation-duration:2.0s;
	  animation-duration:2.0s;
	  -webkit-animation-count:1;
	  animation-count:1;
	  -webkit-animation-fill-mode:forwards;
	  animation-fill-mode:forwards;
	}
	.fadeLeftSlow {
	  -webkit-animation-name: fadeLeftSlow;
	  animation-name: fadeLeftSlow;
	  -webkit-animation-duration:2.0s;
	  animation-duration:2.0s;
	  -webkit-animation-count:1;
	  animation-count:1;
	  -webkit-animation-fill-mode:forwards;
	  animation-fill-mode:forwards;
	}
	.fadeRightSlow {
	  -webkit-animation-name: fadeRightSlow;
	  animation-name: fadeRightSlow;
	  -webkit-animation-duration:2.0s;
	  animation-duration:2.0s;
	  -webkit-animation-count:1;
	  animation-count:1;
	  -webkit-animation-fill-mode:forwards;
	  animation-fill-mode:forwards;
	}
	.delay1 {
		  -webkit-animation-delay: 0.8s;
				  animation-delay: 0.8s;
	}
    .delay2 {
		  -webkit-animation-delay: 1.2s;
				  animation-delay: 1.2s;
	}
    .delay3 {
		  -webkit-animation-delay: 1.6s;
				  animation-delay: 1.6s;
	}
    .delay4 {
		  -webkit-animation-delay: 2.0s;
				  animation-delay: 2.0s;
	}
    .fadeIn {
      -webkit-animation-name: fadeIn;
      animation-name: fadeIn;
      -webkit-animation-duration: 1.3s;
      animation-duration: 1.3s;
      -webkit-animation-fill-mode:forwards;
	  animation-fill-mode:forwards;
    }
    
    @-webkit-keyframes fadeIn {
      0% {opacity: 0;}
      100% {opacity: 1;}
    }
    @keyframes fadeIn {
      0% {opacity: 0;}
      100% {opacity: 1;}
    } 
    
        
    
	@-webkit-keyframes fadeUpSlow {
	  0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 30px, 0);
		transform: translate3d(0, 30px, 0);
	  }
	
	  100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	  }
	}
	
	@keyframes fadeUpSlow {
	  0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 30px, 0);
		-ms-transform: translate3d(0, 30px, 0);
		transform: translate3d(0, 30px, 0);
	  }
	
	  100% {
		opacity: 1;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
	  }
	}
	
	
	@-webkit-keyframes fadeDownSlow {
	  0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -20%, 0);
		transform: translate3d(0, -20%, 0);
	  }
	
	  100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	  }
	}
	
	@keyframes fadeDownSlow {
	  0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -20%, 0);
		-ms-transform: translate3d(0, -20%, 0);
		transform: translate3d(0, -20%, 0);
	  }
	
	  100% {
		opacity: 1;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
	  }
	}
	
	/*test*/
	
	@-webkit-keyframes fadeLeftSlow {
	  0% {
		opacity: 0;
		-webkit-transform: translate3d(-50px,0, 0);
		transform: translate3d(-50px,0, 0);
	  }
	
	  100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	  }
	}
	
	@keyframes fadeLeftSlow {
	  0% {
		opacity: 0;
		-webkit-transform: translate3d(-50px,0, 0);
		-ms-transform: translate3d(-50px,0, 0);
		transform: translate3d(-50px,0, 0);
	  }
	
	  100% {
		opacity: 1;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
	  }
	}
	
	/**/
	@-webkit-keyframes fadeRightSlow {
	  0% {
		opacity: 0;
		-webkit-transform: translate3d(50px,0, 0);
		transform: translate3d(50px,0, 0);
	  }
	
	  100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	  }
	}
	
	@keyframes fadeRightSlow {
	  0% {
		opacity: 0;
		-webkit-transform: translate3d(50px,0, 0);
		-ms-transform: translate3d(50px,0, 0);
		transform: translate3d(50px,0, 0);
	  }
	
	  100% {
		opacity: 1;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
	  }
	}
    
    

    @keyframes flickerAnimation {
      0%   { opacity:1; }
      50%  { opacity:0; }
      100% { opacity:1; }
    }
    @-o-keyframes flickerAnimation{
      0%   { opacity:1; }
      50%  { opacity:0; }
      100% { opacity:1; }
    }
    @-moz-keyframes flickerAnimation{
      0%   { opacity:1; }
      50%  { opacity:0; }
      100% { opacity:1; }
    }
    @-webkit-keyframes flickerAnimation{
      0%   { opacity:1; }
      50%  { opacity:0; }
      100% { opacity:1; }
    }
    .animate-flicker {
       -webkit-animation: flickerAnimation 2s infinite;
       -moz-animation: flickerAnimation 2s infinite;
       -o-animation: flickerAnimation 2s infinite;
        animation: flickerAnimation 2s infinite;
    }

/*--------------------------------------------------------------------------------END ANIMATIONS*/