.project_filter_wrapper ul {
margin: 0 -1rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
.project_filter_wrapper ul li {
list-style: none; padding: 0 1rem;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
max-width: 100%;
}
.project_filter_wrapper ul li > * {
cursor: pointer; padding: 0.1875rem 1rem 0.1875rem;
position: relative; display: block;
}
.project_filter_wrapper ul li [data-project-filter-item]:after {
content: ''; position: absolute;
top: 0.25em; bottom: 0.125rem; left: 0; right: 0;
width: auto; height: auto;
border: 0.12em solid currentColor;
border-radius: 3rem;
opacity: 0;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.project_filter_wrapper ul li [data-project-filter-item].active:after,
.project_filter_wrapper ul li [data-project-filter-item]:hover:after{
opacity: 1;
}
@media screen and (min-width:40em){
.project_filter_wrapper ul {
margin: 0 -2rem;
}
} .project_filter_wrapper .mobile_filter,
.project_filter_wrapper .mobile_filter_headline {
display: none;
}
@media screen and (max-width:39.9375em){
.project_filter_wrapper .mobile_filter,
.project_filter_wrapper .mobile_filter_headline {
display: block;
}
.project_filter_wrapper .mobile_filter .mobile_filter_item {
padding-right: 3rem; position: relative;
cursor: pointer; padding-left: 0;
}
.project_filter_wrapper .mobile_filter .filter_icon {
width: 2rem; height: 2rem; top: 50%; right: 0;
position: absolute; display: block;
background: url(//www.stageone.at/wp-content/themes/typo-canvas-child/assets/img/filter-icon.svg) no-repeat;
background-size: contain;
background-position: 50% 50%;
-webkit-transform: translate(0,-50%);
-moz-transform: translate(0,-50%);
-ms-transform: translate(0,-50%);
-o-transform: translate(0,-50%);
transform: translate(0,-50%);
}
#project_filter_wrapper {
height: 0;
overflow: hidden;
pointer-events: none;
-webkit-transition: height .5s ease;
-moz-transition: height .5s ease;
-ms-transition: height .5s ease;
-o-transition: height .5s ease;
transition: height .5s ease;
}
#project_filter_wrapper.active {
pointer-events: all;
}
.project_filter_wrapper .filter_wrapper ul {
padding: 1rem 0 0;
}
.project_filter_wrapper .filter_wrapper ul li {
width: 100%; display: block;
}
.project_filter_wrapper .filter_wrapper ul li.first_el {
display: none;
}
.project_filter_wrapper ul li [data-project-filter-item] {
padding: 0 2rem;
}
.project_filter_wrapper .filter_wrapper ul li [data-project-filter-item]:after {
content: none;
}
.project_filter_wrapper .filter_wrapper ul li [data-project-filter-item]:before {
content: ''; position: absolute;
top: 0.5rem; left: 0; width: 1rem; height: 1rem;
border: 1px solid currentColor; background-color: #FFFFFF;
border-radius: 50%;
}
.project_filter_wrapper .filter_wrapper ul li [data-project-filter-item].active:before{
background-color: #000000;
}
.project_filter_wrapper .filter_wrapper .mobile_close {
position: absolute; top: 1rem; right: 1rem;
width: 2rem; height: 1rem; cursor: pointer;
}
.project_filter_wrapper .filter_wrapper .mobile_close:after,
.project_filter_wrapper .filter_wrapper .mobile_close:before {
content: ''; position: absolute; top: 50%; left: 50%;
width: 1.5rem; height: 0.125rem; background-color: currentColor;
-webkit-transform: translate(-50%,-50%) rotate(45deg);
-moz-transform: translate(-50%,-50%) rotate(45deg);
-ms-transform: translate(-50%,-50%) rotate(45deg);
-o-transform: translate(-50%,-50%) rotate(45deg);
transform: translate(-50%,-50%) rotate(45deg);
}
.project_filter_wrapper .filter_wrapper .mobile_close:before {
-webkit-transform: translate(-50%,-50%) rotate(-45deg);
-moz-transform: translate(-50%,-50%) rotate(-45deg);
-ms-transform: translate(-50%,-50%) rotate(-45deg);
-o-transform: translate(-50%,-50%) rotate(-45deg);
transform: translate(-50%,-50%) rotate(-45deg);
}
} .project_listing [data-project-item] {
display: none;
}
.project_listing [data-project-item].active {
display: block;
}
.project_listing [data-project-item] > * {
opacity: 0;
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
-o-transform: scale(0.7);
transform: scale(0.7);
}
.project_listing [data-project-item].anim_in > * {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: opacity .5s ease, transform .5s ease;
-moz-transition: opacity .5s ease, transform .5s ease;
-ms-transition: opacity .5s ease, transform .5s ease;
-o-transition: opacity .5s ease, transform .5s ease;
transition: opacity .5s ease, transform .5s ease;
} .section_trenner_one .el_wrapper {
width: 100%; 
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
.section_trenner_one .el_wrapper .el {
padding: 0 0 15%;
position: relative;
-webkit-box-flex:0;
-webkit-flex:0 0 10%;
-ms-flex:0 0 10%;
flex:0 0 10%;
max-width:10%
}
.section_trenner_one .el_wrapper .el:after {
content: ''; position: absolute;
top: 50%; left: 50%; height: 100%; 
width: 15%; border-radius: 2rem;
background-color: currentColor;
-webkit-transform: translate(-50%,-50%) rotate(30deg);
-moz-transform: translate(-50%,-50%) rotate(30deg);
-ms-transform: translate(-50%,-50%) rotate(30deg);
-o-transform: translate(-50%,-50%) rotate(30deg);
transform: translate(-50%,-50%) rotate(30deg);
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.section_trenner_one .el_wrapper:hover .el:after {
height: 70%;
-webkit-transform: translate(-50%,-50%) rotate(60deg);
-moz-transform: translate(-50%,-50%) rotate(60deg);
-ms-transform: translate(-50%,-50%) rotate(60deg);
-o-transform: translate(-50%,-50%) rotate(60deg);
transform: translate(-50%,-50%) rotate(60deg);
} .section_trenner_two .logo_wrapper{
position: relative;
width: 50%; margin: 0 auto;
padding: 0 0 50%;
}
.section_trenner_two .logo_wrapper .logo.clock {
position: absolute; top: 0; left: 0; bottom: 0;
right: 0; width: auto; height: auto;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.section_trenner_two:hover .logo_wrapper .logo.clock {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}