.portfolio {
position:relative;
z-index:1;
width:100%;	
overflow: hidden;
}
.background {
position:relative;
top:0;
left:0;
width:100%;
height:100%;
z-index:2;	
}
.portfolio .gallery,
.portfolio .gallery .inside {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
}
.portfolio .gallery {
width:100%;
height:100%;
position:absolute;
top:0px;
overflow:hidden;
}
.portfolio .gallery .inside {
z-index:1;
}
.portfolio .arrows span {
position:absolute;
z-index:3;
width:32px;
height:32px;
outline:none;
text-decoration: none !important;
cursor: pointer;
background: transparent !important;
}
.portfolio a, .portfolio a:hover, .portfolio a:focus 
{
border-bottom: none !important;
box-shadow: none !important;
}
.portfolio .arrows .prev,
.portfolio .arrows .up {
display:none;
}
.portfolio .arrows .up,
.portfolio .arrows .down {
left:50%;
margin-left:-16px;
}
.portfolio .arrows .prev,
.portfolio .arrows .next {
top:50%;
transform:translateY(-50%);
}
.portfolio .arrows .up {
top:20px;
}
.portfolio .arrows .down {
top:60%;
}
.portfolio .arrows .prev {
left:60px;
}
.portfolio .arrows .next {
right:60px;
}
.portfolio .item {
position:absolute;
top:0;
width:100%;
}
.portfolio .item div {
position:absolute;
left:0;
width:100%;
height:100%;
}
.portfolio .item div img {
position:absolute;
top:50%;
left:50%;
transform:translateY(-50%) translateX(-50%);
}
.portfolio .paths {
position:absolute;
left:50%;
margin-left:-10px;
z-index:4;
top: 80%;
}
.portfolio .paths div {
position:absolute;
top:0;
}
.portfolio .paths a {
display:block;
position:absolute;
left:0;
outline:none;	
} .clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.og-grid {
list-style: none;
padding: 20px 0 !important;
margin: 0 auto !important;
text-align: center;
width: 100%;
}
.og-grid li {
display: inline-block;
margin: 10px 5px 0 5px !important;
vertical-align: top;
padding: 0 !important; 
}
.og-grid li.hidden {
display: none;
}
.og-grid li > a,
.og-grid li > a img {
border: none;
outline: none;
display: block;
position: relative;
}
.og-pointer{
top: auto;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: relative;
pointer-events: none;
border-width: 15px;
left: 50%;
margin: -20px 0 0 -15px;
}
.og-expander {
position: absolute;
top: auto;
left: 0;
width: 100%;
margin-top: 0px;
text-align: left;
height: 0px;
overflow: hidden;
}
.og-expander-inner {
padding: 30px 30px;
height: 100%;
box-sizing:border-box !important;
}
.og-close {
position: absolute;
top: 10px;
right: 15px;
cursor: pointer;
opacity: 0.8;
}
.og-close:hover{
opacity: 1;
}
.og-fullimg,
.og-details {
width: 48%;
float: left;
overflow: hidden;
position: relative;
}
.og-details .infosep {
margin: 15px 0;
}
.og-details {
padding: 0 15px;
}
.og-fullimg {
text-align: center;
}
.og-fullimg img {
display: inline-block;
height: 100%;
max-height: 250px;
max-width: 100%;
}
.og-details h3 {
font-weight: 300 !important;
margin-top: 0px;
margin-bottom: 10px;
}
.og-details p {
font-weight: 400;
line-height: 22px;
padding-bottom: 20px;
}
.og-details iframe {
max-width: 400px;
max-height: 250px;
margin-bottom: 0px;
}
.og-details a.link-button {
padding: 8px 10px;
white-space: normal;
word-wrap: normal;
cursor: pointer !important;
font-weight: bold;
text-align: center;
white-space: normal;
margin-left: 10px;
text-decoration: none;
}
.og-details a.first{
margin-left: 0px;
}
.og-loading {
width: 20px;
height: 20px;
border-radius: 50%;
background: #ddd;
box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc;
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
-webkit-animation: loader 0.5s infinite ease-in-out both;
-moz-animation: loader 0.5s infinite ease-in-out both;
animation: loader 0.5s infinite ease-in-out both;
}
@-webkit-keyframes loader {
0% { background: #ddd; }
33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}
@-moz-keyframes loader {
0% { background: #ddd; }
33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}
@keyframes loader {
0% { background: #ddd; }
33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
} .wagwep-container{
overflow: hidden;
}
.wagwep-container ul#portfolio-filter {
float: left;
list-style: none;
padding: 10px 0px;
width: 100%;
}
.wagwep-container ul#portfolio-filter li { float: left;	
margin: 0px;
padding: 10px;
}
.wagwep-container ul#portfolio-filter li:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.wagwep-container ul#portfolio-filter a {
text-decoration: none;
text-transform: none;
border:0;
margin:0 10px 10px 0;
padding:6px 12px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
.og-details h3
{
text-transform: none !important;
}
ul#portfolio-filter a, ul#portfolio-filter a:hover, ul#portfolio-filter a:focus
{
box-shadow: none !important;
border-bottom: none !important;
text-transform: none !important;
outline: none !important;
}
.og-details a.link-button, .og-details a.link-button:hover, .og-details a.link-button:focus
{
box-shadow: none !important;
text-transform: none !important;
outline: none !important;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.elastislide-list {
list-style-type: none;
display: none;
}
.no-js .elastislide-list {
display: block;
}
.elastislide-carousel ul li {
min-width: 20px; margin: 0 5px !important;
}
.elastislide-wrapper {
position: relative;
margin: 0 auto;
min-height: 60px;
}
.elastislide-wrapper.elastislide-loading {
background-image: url(//chain-elle.de/wp-content/plugins/Total-Soft-Portfolio/Images/loading.gif);
background-repeat: no-repeat;
background-position: center center;
}
.elastislide-horizontal nav
{
padding: 0 !important; 
}
.elastislide-horizontal {
padding: 10px 40px;
}
.elastislide-vertical {
padding: 40px 10px;
}
.elastislide-carousel {
overflow: hidden;
position: relative;
}
.elastislide-carousel ul {
position: relative;
display: block;
list-style-type: none;
padding: 0;
margin: 0;
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
.elastislide-horizontal ul {
white-space: nowrap;
}
.elastislide-carousel ul li {
margin: 0;
-webkit-backface-visibility: hidden;
}
.elastislide-horizontal ul li {
height: 100%;
display: inline-block;
width:100px !important;
}
.elastislide-vertical ul li {
display: block;
}
.elastislide-carousel ul li a {
display: inline-block;
width: 100%;
padding: 0px;
}
.elastislide-carousel ul li a img {
display: block;
max-width: 100%;
} .elastislide-wrapper nav span {
position: absolute;
border-radius: 50%;
cursor: pointer;
opacity: 0.8;
}
.elastislide-wrapper nav span:hover {
opacity: 1.0
}
.elastislide-horizontal nav span {
top: 50%;
left: 10px;
margin-top: -11px;
}
.elastislide-horizontal nav span.elastislide-next {
right: 10px;
left: auto;
} .og-grid li a:hover, .og-grid li a:focus
{
border-bottom: none !important;
}
.elastislide-list li a:hover, .elastislide-list li a:focus
{
box-shadow: none !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
}
.og-grid li a {
overflow: hidden;
}
.og-grid li a.unhoverdir {
overflow: visible;
}
.og-grid li a figure {
position: absolute;
width: 100%;
height: 100%;
}
.og-grid li a figure span {
display: block;
padding: 10px 0;
margin: 40px 20px 20px 20px;
font-weight: normal;
}
.wagwep-container ul#portfolio-filter li.current:hover, .wagwep-container ul#portfolio-filter li.current, .wagwep-container ul#portfolio-filter li.current:focus
{
background: none !important;
}  .og-grid.effect-opacity li.animate {
-webkit-animation: fadeIn 0.65s ease forwards;
-moz-animation: fadeIn 0.65s ease forwards;
animation: fadeIn 0.65s ease forwards;
}
@-webkit-keyframes fadeIn {
to { opacity: 1; }
}
@-moz-keyframes fadeIn {
to { opacity: 1; }
}
@keyframes fadeIn {
to { opacity: 1; }
} .og-grid.effect-moveup li.animate {
-webkit-transform: translateY(200px);
-moz-transform: translateY(200px);
transform: translateY(200px);
-webkit-animation: moveUp 0.65s ease forwards;
-moz-animation: moveUp 0.65s ease forwards;
animation: moveUp 0.65s ease forwards;
}
@-webkit-keyframes moveUp {
to { -webkit-transform: translateY(0); opacity: 1; }
}
@-moz-keyframes moveUp {
to { -moz-transform: translateY(0); opacity: 1; }
}
@keyframes moveUp {
to { transform: translateY(0); opacity: 1; }
} .og-grid.effect-scaleup li.animate {
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
-webkit-animation: scaleUp 0.65s ease-in-out forwards;
-moz-animation: scaleUp 0.65s ease-in-out forwards;
animation: scaleUp 0.65s ease-in-out forwards;
}
@-webkit-keyframes scaleUp {
to { -webkit-transform: scale(1); opacity: 1; }
}
@-moz-keyframes scaleUp {
to { -moz-transform: scale(1); opacity: 1; }
}
@keyframes scaleUp {
to { transform: scale(1); opacity: 1; }
} .og-grid.effect-fallperspective {
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
}
.og-grid.effect-fallperspective li.animate {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(400px) translateY(300px) rotateX(-90deg);
-moz-transform: translateZ(400px) translateY(300px) rotateX(-90deg);
transform: translateZ(400px) translateY(300px) rotateX(-90deg);
-webkit-animation: fallPerspective .8s ease-in-out forwards;
-moz-animation: fallPerspective .8s ease-in-out forwards;
animation: fallPerspective .8s ease-in-out forwards;
}
@-webkit-keyframes fallPerspective {
100% { -webkit-transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}
@-moz-keyframes fallPerspective {
100% { -moz-transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}
@keyframes fallPerspective {
100% { transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
} .og-grid.effect-fly {
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
}
.og-grid.effect-fly li.animate {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50% -300px;
-moz-transform-origin: 50% 50% -300px;
transform-origin: 50% 50% -300px;
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
transform: rotateX(-180deg);
-webkit-animation: fly .8s ease-in-out forwards;
-moz-animation: fly .8s ease-in-out forwards;
animation: fly .8s ease-in-out forwards;
}
@-webkit-keyframes fly {
100% { -webkit-transform: rotateX(0deg); opacity: 1; }
}
@-moz-keyframes fly {
100% { -moz-transform: rotateX(0deg); opacity: 1; }
}
@keyframes fly {
100% { transform: rotateX(0deg); opacity: 1; }
} .og-grid.effect-flip {
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
}
.og-grid.effect-flip li.animate {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: rotateX(-80deg);
-moz-transform: rotateX(-80deg);
transform: rotateX(-80deg);
-webkit-animation: flip .8s ease-in-out forwards;
-moz-animation: flip .8s ease-in-out forwards;
animation: flip .8s ease-in-out forwards;
}
@-webkit-keyframes flip {
100% { -webkit-transform: rotateX(0deg); opacity: 1; }
}
@-moz-keyframes flip {
100% { -moz-transform: rotateX(0deg); opacity: 1; }
}
@keyframes flip {
100% { transform: rotateX(0deg); opacity: 1; }
} .og-grid.effect-helix {
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
}
.og-grid.effect-helix li.animate {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-animation: helix .8s ease-in-out forwards;
-moz-animation: helix .8s ease-in-out forwards;
animation: helix .8s ease-in-out forwards;
}
@-webkit-keyframes helix {
100% { -webkit-transform: rotateY(0deg); opacity: 1; }
}
@-moz-keyframes helix {
100% { -moz-transform: rotateY(0deg); opacity: 1; }
}
@keyframes helix {
100% { transform: rotateY(0deg); opacity: 1; }
} .og-grid.effect-popup {
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
}
.og-grid.effect-popup li.animate {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
transform: scale(0.4);
-webkit-animation: popUp .8s ease-in forwards;
-moz-animation: popUp .8s ease-in forwards;
animation: popUp .8s ease-in forwards;
}
@-webkit-keyframes popUp {
70% { -webkit-transform: scale(1.1); opacity: .8; -webkit-animation-timing-function: ease-out; }
100% { -webkit-transform: scale(1); opacity: 1; }
}
@-moz-keyframes popUp {
70% { -moz-transform: scale(1.1); opacity: .8; -moz-animation-timing-function: ease-out; }
100% { -moz-transform: scale(1); opacity: 1; }
}
@keyframes popUp {
70% { transform: scale(1.1); opacity: .8; animation-timing-function: ease-out; }
100% { transform: scale(1); opacity: 1; }
}  nav#porfolio-nav {
width: 100%;
position: relative;
}
nav#porfolio-nav ul {
padding: 0;
margin: 0 auto;
}
nav#porfolio-nav li {
display: inline;
float: left;
}
nav#porfolio-nav li a {
border-right: 1px solid #576979;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav#porfolio-nav li:last-child a {
border-right: 0;
} @media screen and (max-width: 600px) {
nav#porfolio-nav {
height: auto;
}
nav#porfolio-nav ul {
width: 100%;
display: block;
height: auto;
}
nav#porfolio-nav li {
width: 50%;
float: left;
position: relative;
}
nav#porfolio-nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav#porfolio-nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
} @media only screen and (max-width : 480px) {
nav#porfolio-nav {
border-bottom: 0;
}
nav#porfolio-nav ul { height: auto;
}
.og-expander h3 { font-size: 18px; }
.og-expander p { font-size: 12px; }
.og-expander a { font-size: 11px; }
.og-expander-inner { padding: 10px;	}
.og-grid .sep { display: none;}
.og-fullimg{
height: 30%;
width: 100%;
}
.og-details{
width: 100%;
margin-top: 5px;
}
.og-details h3 {
font-size: 18px;
margin-bottom: 0px;
}
.og-details p {
padding-bottom: 10px;
}
.og-details .infosep {
margin: 10px 0px;
}
.elastislide-wrapper{
max-width: 300px;
}
} @media only screen and (max-width : 320px) {
nav#porfolio-nav li {
display: block;
float: none;
width: 100%;
}
nav#porfolio-nav li a {
border-bottom: 1px solid #576979;
}
.og-details h3 {
font-size: 18px;
margin-bottom: 0px;
}
.og-details p {
padding-bottom: 10px;
}
.og-details .infosep {
margin: 10px 0px;
}
}
@media (min-width: 1200px) {
.og-expander h3 { font-size: 35px; }
.og-expander p { font-size: 13px; }
.og-expander a { font-size: 12px; }
}
@media (min-width: 768px) and (max-width: 979px) {
.og-expander h3 { font-size: 32px; }
.og-expander p { font-size: 12px; }
.og-expander a { font-size: 11px; }
.og-grid .sep { margin: 20px 10px; height: 80%}
}
@media (max-width: 960px) {
.og-details {
width:46%;
}
}
@media (max-width: 821px) {
.og-details {
width:45%;
}
}
@media (max-width: 767px) {
.og-expander h3 { font-size: 20px; }
.og-expander p { font-size: 12px; }
.og-expander a { font-size: 11px; }
.og-grid .sep { display: none;}
.og-fullimg{
height: 40%;
width: 100%;
}
.elastislide-horizontal ul li {
width:100px !important;
}
.og-details{
width: 100%;
margin-top: 5px;
}
.og-details p {
padding-bottom: 5px;
height:45px;
}
.og-details .infosep {
margin: 12px 0px;
}
.elastislide-wrapper{
max-width: 300px;
padding-bottom: 5px;
}
}
@media (max-width: 979px) {
}
@media (min-width: 980px) {
}
.comment_content ul li:before, .entry-content ul li:before
{
content: "" !important;
} .grid {
position: relative;
overflow: hidden;
max-width: 1300px;
margin: 0 auto;
padding: 1.5em 0 8em;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
} .grid__loader {
display: none !important;
margin: 3em auto 0;
}
.grid--loading .grid__loader {
display: block;
} .grid:after {
content: '';
display: block;
clear: both;
} .grid__sizer,
.grid__item {
position: relative;
float: left;
width: 25%;
}
.grid--loading .grid__item {
visibility: hidden;
}
.grid__item--size-a {
width: 50%;
} .slider {
border-radius: 3px;
}
.slider__item {
position:relative;
width: 100%;
overflow:hidden;
}
.slider__item img {
width: 100%;
vertical-align: middle !important;
margin: 0 !important;
} .slider .flickity-page-dots {
bottom: 20px;
opacity: 0;
-webkit-transition: opacity .3s;
transition: opacity .3s;
} .grid__item .meta {
position: relative;
margin: 10px 0 0 !important;
padding: 3px 5px 3px 5px !important;
}
.meta__brand {
display: block;
} .action {
font-family: Avenir, 'Helvetica Neue', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif;
font-size: 1.05em;
position: relative;
overflow: hidden;
margin: 0;
padding: .25em;
cursor: pointer;
color: #fff;
border: none;
background: none;
}
.action:focus {
outline: none;
}
.no-touch .action--button:hover {
outline: none;
background:none;
}
.text-hidden {
position: absolute;
top: 200%;
} .action--buy {
position: absolute;
top: 0;
right: 0;
padding: 1.85em 2.35em;
-webkit-transition: opacity .3s, -webkit-transform .3s;
transition: opacity .3s, transform .3s;
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0);
}
.no-touch .action--buy {
opacity: 0;
}
.no-touch .grid__item:hover .action--buy {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
} .bar {
position: relative;
z-index: 100;
bottom: 0;
left: 0;
width: 100%;
padding: 10px;
-webkit-transform: translate3d(0, 0, 0);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; } .filter__item {
font-weight: bold !important;
margin: 0 2% !important;
padding:3px 10px !important;
vertical-align: middle;
line-height: 1 !important;
text-transform: none !important;
} @media screen and (max-width: 65em) {
.grid__sizer,
.grid__item,
.grid__item--size-a {
width: 33.333%;
}
}
@media screen and (max-width: 50em) {
.grid__sizer,
.grid__item,
.grid__item--size-a {
width: 50%;
}
.bar {
padding-left: 0;
text-align: left;
}
}
@media screen and (max-width: 40em) {
.bar {
padding: .5em 4.5em .5em 0;
}
.flexbox .filter {
-webkit-justify-content: space-around;
justify-content: space-around;
}
.filter__item {
font-weight: bold;
margin: 0 2%;
padding:0 10px;
vertical-align: middle;
}
.action__text {
display: none;
}
.cart {
padding: 0 1em;
}
}
@media screen and (max-width: 25em) {
.grid {
max-width: 75%;
}
.grid__loader {
margin: 0 auto;
}
.grid__sizer,
.grid__item,
.grid__item--size-a {
width: 100%;
}
.action--buy {
font-size: 1.5em;
padding: 1.15em 1.5em;
-webkit-tap-highlight-color: transparent;
}
.filter__item {
font-weight: bold;
margin: 0 2%;
padding:0 10px;
vertical-align: middle;
}
}