Code: Alles auswählen
/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
/*
Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
*/
/* pswp = photoswipe */
.pswp {
display: none;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
overflow: hidden;
-ms-touch-action: none;
touch-action: none;
z-index: 1500;
-webkit-text-size-adjust: 100%;
/* create separate layer, to avoid paint on window.onscroll in webkit/blink */
-webkit-backface-visibility: hidden;
outline: none; }
.pswp * {
box-sizing: border-box; }
.pswp img {
max-width: none;
border: 1px solid #717171;
-webkit-box-shadow: 0px 0px 40px #A0A0A0;
-moz-box-shadow: 0px 0px 40px #A0A0A0;
box-shadow: 0px 0px 40px #A0A0A0 }
/* style is added when JS option showHideOpacity is set to true */
.pswp--animate_opacity {
/* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
opacity: 0.001;
will-change: opacity;
/* for open/close transition */
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
.pswp--open {
display: block; }
.pswp--zoom-allowed .pswp__img {
/* autoprefixer: off */
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in; }
.pswp--zoomed-in .pswp__img {
/* autoprefixer: off */
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab; }
.pswp--dragging .pswp__img {
/* autoprefixer: off */
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: grabbing; }
/*
Background is added as a separate element.
As animating opacity is much faster than animating rgba() background-color.
*/
.pswp__bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(232, 231, 227, 0.96);
opacity: 0;
-webkit-backface-visibility: hidden;
will-change: opacity; }
.pswp__scroll-wrap {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden; }
.pswp__container,
.pswp__zoom-wrap {
-ms-touch-action: none;
touch-action: none;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0; }
/* Prevent selection and tap highlights */
.pswp__container,
.pswp__img {
-webkit-box-shadow: 0px 0px 5px #aaa;
-moz-box-shadow: 0px 0px 5px #aaa;
box-shadow: 0px 0px 5px #aaa;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none; }
.pswp__zoom-wrap {
position: absolute;
width: 100%;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
/* for open/close transition */
transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }
.pswp__bg {
will-change: opacity;
/* for open/close transition */
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
.pswp--animated-in .pswp__bg,
.pswp--animated-in .pswp__zoom-wrap {
-webkit-transition: none;
transition: none; }
.pswp__container,
.pswp__zoom-wrap {
-webkit-backface-visibility: hidden;
will-change: transform; }
.pswp__item {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden; }
.pswp__img {
border-radius: 8px;
box-shadow: 0 2px 2px rgba(204, 197, 185, 0.5);
position: absolute;
width: auto;
height: auto;
top: 0;
left: 0; }
/*
stretched thumbnail or div placeholder element (see below)
style is added to avoid flickering in webkit/blink when layers overlap
*/
.pswp__img--placeholder {
-webkit-backface-visibility: hidden; }
/*
div element that matches size of large image
large image loads on top of it
*/
.pswp__img--placeholder--blank {
background: #222; }
.pswp--ie .pswp__img {
width: 100% !important;
height: auto !important;
left: 0;
top: 0; }
/*
Error message appears when image is not loaded
(JS option errorMsg controls markup)
*/
.pswp__error-msg {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 14px;
line-height: 16px;
margin-top: -8px;
color: #CCC; }
.pswp__error-msg a {
color: #CCC;
text-decoration: underline; }
/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
/*
Contents:
1. Buttons
2. Share modal and links
3. Index indicator ("1 of X" counter)
4. Caption
5. Loading indicator
6. Additional styles (root element, top bar, idle state, hidden state, etc.)
*/
/*
1. Buttons
*/
/* <button> css reset */
.pswp__button {
width: 44px;
height: 44px;
position: relative;
background: none;
cursor: pointer;
overflow: visible;
-webkit-appearance: none;
display: block;
border: 0;
padding: 0;
margin: 0;
float: right;
opacity: 0.75;
transition: opacity 0.2s;
box-shadow: none; }
.pswp__button:focus, .pswp__button:hover {
opacity: 1; }
.pswp__button:active {
outline: none;
opacity: 0.9; }
.pswp__button::-moz-focus-inner {
padding: 0;
border: 0; }
/* pswp__ui--over-close class it added when mouse is over element that should close gallery */
.pswp__ui--over-close .pswp__button--close {
opacity: 1; }
.pswp__button,
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
background: url("files/default-skin.png") 0 0 no-repeat;
background-size: 264px 88px;
width: 44px;
height: 44px; }
@media (-webkit-min-device-pixel-ratio: 1.1), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
/* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
.pswp--svg .pswp__button,
.pswp--svg .pswp__button--arrow--left:before,
.pswp--svg .pswp__button--arrow--right:before {
background-image: url("files/default-skin.svg"); }
.pswp--svg .pswp__button--arrow--left,
.pswp--svg .pswp__button--arrow--right {
background: none; } }
.pswp__button--close {
background-position: 0 -44px; }
.pswp__button--share {
background-position: -44px -44px; }
.pswp__button--fs {
display: none; }
.pswp--supports-fs .pswp__button--fs {
display: block; }
.pswp--fs .pswp__button--fs {
background-position: -44px 0; }
.pswp__button--zoom {
background-position: -88px 0;
display: none; }
.pswp--zoom-allowed .pswp__button--zoom {
display: block; }
.pswp--zoomed-in .pswp__button--zoom {
background-position: -132px 0; }
/* no arrows on touch screens */
.pswp--touch .pswp__button--arrow--left,
.pswp--touch .pswp__button--arrow--right {
visibility: hidden; }
/*
Arrow buttons hit area
(icon is added to :before pseudo-element)
*/
.pswp__button--arrow--left,
.pswp__button--arrow--right {
background: none;
top: 50%;
margin-top: -50px;
width: 70px;
height: 100px;
position: absolute; }
.pswp__button--arrow--left {
left: 0; }
.pswp__button--arrow--right {
right: 0; }
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
content: '';
top: 35px;
background-color: #e8e6e3;
height: 30px;
width: 32px;
position: absolute; }
.pswp__button--arrow--left:before {
left: 6px;
background-position: -138px -44px; }
.pswp__button--arrow--right:before {
right: 6px;
background-position: -94px -44px; }
/*
2. Share modal/popup and links
*/
.pswp__counter,
.pswp__share-modal {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none; }
.pswp__share-modal {
display: block;
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 10px;
position: absolute;
z-index: 1600;
opacity: 0;
transition: opacity 0.25s ease-out;
-webkit-backface-visibility: hidden;
will-change: opacity; }
.pswp__share-modal--hidden {
display: none; }
.pswp__share-tooltip {
z-index: 1620;
position: absolute;
background: #FFF;
top: 56px;
border-radius: 2px;
display: block;
width: auto;
right: 44px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
transform: translateY(6px);
transition: transform 0.25s;
-webkit-backface-visibility: hidden;
will-change: transform; }
.pswp__share-tooltip a {
display: block;
padding: 8px 12px;
color: #000;
text-decoration: none;
font-size: 14px;
line-height: 18px; }
.pswp__share-tooltip a:hover {
text-decoration: none;
color: #000; }
.pswp__share-tooltip a:first-child {
/* round corners on the first/last list item */
border-radius: 2px 2px 0 0; }
.pswp__share-tooltip a:last-child {
border-radius: 0 0 2px 2px; }
.pswp__share-modal--fade-in {
opacity: 1; }
.pswp__share-modal--fade-in .pswp__share-tooltip {
transform: translateY(0); }
/* increase size of share links on touch devices */
.pswp--touch .pswp__share-tooltip a {
padding: 16px 12px; }
a.pswp__share--facebook:before {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
top: -12px;
right: 15px;
border: 6px solid transparent;
border-bottom-color: #FFF;
-webkit-pointer-events: none;
-moz-pointer-events: none;
pointer-events: none; }
a.pswp__share--facebook:hover {
background: #3E5C9A;
color: #FFF; }
a.pswp__share--facebook:hover:before {
border-bottom-color: #3E5C9A; }
a.pswp__share--twitter:hover {
background: #55ACEE;
color: #FFF; }
a.pswp__share--pinterest:hover {
background: #CCC;
color: #CE272D; }
a.pswp__share--download:hover {
background: #DDD; }
/*
3. Index indicator ("1 of X" counter)
*/
.pswp__counter {
position: absolute;
left: 0;
top: 0;
height: 44px;
font-size: 16px;
line-height: 44px;
color: #66615b;
opacity: 1;
padding: 5px 20px; }
/*
4. Caption
*/
.pswp__caption {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
min-height: 44px; }
.pswp__caption small {
font-size: 12px;
color: #a49e93; }
.pswp__caption__center {
text-align: left;
max-width: 420px;
margin: 0 auto;
font-size: 1.25em;
padding: 30px;
line-height: 1.5em;
color: #66615b;
text-align: center; }
.pswp__caption--empty {
display: none; }
/* Fake caption element, used to calculate height of next/prev image */
.pswp__caption--fake {
visibility: hidden; }
/*
5. Loading indicator (preloader)
You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR
*/
.pswp__preloader {
width: 44px;
height: 44px;
position: absolute;
top: 0;
left: 50%;
margin-left: -22px;
opacity: 0;
transition: opacity 0.25s ease-out;
will-change: opacity;
direction: ltr; }
.pswp__preloader__icn {
width: 20px;
height: 20px;
margin: 12px; }
.pswp__preloader--active {
opacity: 1; }
.pswp__preloader--active .pswp__preloader__icn {
/* We use .gif in browsers that don't support CSS animation */
background: url("files/preloader.gif") 0 0 no-repeat; }
.pswp--css_animation .pswp__preloader--active {
opacity: 1; }
.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
animation: clockwise 500ms linear infinite; }
.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; }
.pswp--css_animation .pswp__preloader__icn {
background: none;
opacity: 0.75;
width: 14px;
height: 14px;
position: absolute;
left: 15px;
top: 15px;
margin: 0; }
.pswp--css_animation .pswp__preloader__cut {
/*
The idea of animating inner circle is based on Polymer ("material") loading indicator
by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
*/
position: relative;
width: 7px;
height: 14px;
overflow: hidden; }
.pswp--css_animation .pswp__preloader__donut {
box-sizing: border-box;
width: 14px;
height: 14px;
border: 2px solid #FFF;
border-radius: 50%;
border-left-color: transparent;
border-bottom-color: transparent;
position: absolute;
top: 0;
left: 0;
background: none;
margin: 0; }
@media screen and (max-width: 1024px) {
.pswp__preloader {
position: relative;
left: auto;
top: auto;
margin: 0;
float: right; } }
@keyframes clockwise {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); } }
@keyframes donut-rotate {
0% {
transform: rotate(0); }
50% {
transform: rotate(-140deg); }
100% {
transform: rotate(0); } }
/*
6. Additional styles
*/
/* root element of UI */
.pswp__ui {
-webkit-font-smoothing: auto;
visibility: visible;
opacity: 1;
z-index: 1550; }
/* top black bar with buttons and "1 of X" indicator */
.pswp__top-bar {
position: absolute;
left: 0;
top: 0;
height: 44px;
width: 100%; }
.pswp__caption,
.pswp__top-bar,
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
-webkit-backface-visibility: hidden;
will-change: opacity;
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
/* pswp--has_mouse class is added only when two subsequent mousemove events occur */
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
visibility: visible; }
.pswp__top-bar,
.pswp__caption {
background-color: rgba(232, 231, 227, 0.96); }
/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
.pswp__ui--fit .pswp__top-bar,
.pswp__ui--fit .pswp__caption {
background-color: rgba(232, 231, 227, 0.96); }
/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
.pswp__ui--idle .pswp__top-bar {
opacity: 0; }
.pswp__ui--idle .pswp__button--arrow--left,
.pswp__ui--idle .pswp__button--arrow--right {
opacity: 0; }
/*
pswp__ui--hidden class is added when controls are hidden
e.g. when user taps to toggle visibility of controls
*/
.pswp__ui--hidden .pswp__top-bar,
.pswp__ui--hidden .pswp__caption,
.pswp__ui--hidden .pswp__button--arrow--left,
.pswp__ui--hidden .pswp__button--arrow--right {
/* Force paint & create composition layer for controls. */
opacity: 0.001; }
/* pswp__ui--one-slide class is added when there is just one item in gallery */
.pswp__ui--one-slide .pswp__button--arrow--left,
.pswp__ui--one-slide .pswp__button--arrow--right,
.pswp__ui--one-slide .pswp__counter {
display: none; }
.pswp__element--disabled {
display: none !important; }
.pswp--minimal--dark .pswp__top-bar {
background: none; }
.gallery-item {
margin-bottom: 10px;
}
.gallery-item .vertical-image {
height: 350px; }
.gallery-item .small-image {
height: 175px; }
.gallery-item .gallery-caption {
margin-top: 8px;
font-size: 13px;
text-align: center; }
.gallery-item img {
border: 1px solid #717171;
-webkit-box-shadow: 0px 0px 10px #A0A0A0;
-moz-box-shadow: 0px 0px 10px #A0A0A0;
box-shadow: 0px 0px 10px #A0A0A0;
margin: 0 auto !important;
}
.card-wrapper {
padding-top: 40px;
padding-bottom: 30px;
}
.card-wrapper.top {
padding-bottom: 0;
}
.card-wrapper.bottom {
padding-top: 0;
}
.card-wrapper.no-distance {
padding-top: 0;
padding-bottom: 0;
}
.card-wrapper.top .card,
.card-wrapper.no-distance .card {
margin-bottom: 30px;
}
.card {
border-radius: 8px;
box-shadow: 0 2px 2px rgba(204, 197, 185, 0.5);
background-color: #FFFFFF;
color: #252422;
margin-bottom: 50px;
position: relative;
z-index: 1; }
.card-user {
border: 1px solid #ccc; }
.card .title,
.card .stats,
.card .category,
.card p,
.card .social-line,
.card .actions,
.card .content,
.card .card-footer,
.card small,
.card a {
position: relative;
z-index: 3; }
.card a {
color: #444444; }
.card a:hover, .card a:focus {
color: #333333; }
.card img {
max-width: 100%;
height: auto; }
.card[data-radius="none"] {
border-radius: 0px; }
.card[data-radius="none"] .header {
border-radius: 0px 0px 0 0; }
.card[data-radius="none"] .header img {
border-radius: 0px 0px 0 0; }
.card.card-plain {
background-color: transparent;
box-shadow: none;
border-radius: 0; }
.card.card-with-shadow {
box-shadow: 0 20px 16px -15px rgba(165, 165, 165, 0.57); }
.card .btn {
text-shadow: none;
font-weight: bold; }
.card .title-uppercase {
text-transform: uppercase; }
.card .header {
position: relative;
border-radius: 3px 3px 0 0;
z-index: 3; }
.card .header.header-with-icon {
height: 150px; }
.card .header img {
width: 100%;
/*
@include opacity(0);
display: none;
*/ }
.card .header .category {
padding: 15px; }
.card .content .price {
border: 2px solid rgba(255, 255, 255, 0.7);
color: white;
border-radius: 50%;
width: 152px;
height: 152px;
margin: 30px auto;
text-align: center;
vertical-align: middle;
line-height: 200px; }
.card .content .price h4 {
margin: 5px 0 0;
font-size: 36px; }
.card .content .price h6 {
margin-top: 45px;
font-size: 16px; }
.card .content .price .currency {
font-size: 22px;
font-weight: normal; }
.card .actions {
padding: 10px 15px; }
.card .more {
float: right;
z-index: 4;
display: block;
padding-top: 10px;
padding-right: 10px;
position: relative; }
.card .filter,
.card .header .actions {
position: absolute;
z-index: 2;
background-color: rgba(0, 0, 0, 0.76);
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
opacity: 0; }
.card .header .actions {
background-color: transparent;
z-index: 3; }
.card .header .actions .btn {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); }
.card:hover .filter {
opacity: 0.7; }
.card:hover .header .social-line,
.card:hover .header .actions {
opacity: 1; }
.card .category,
.card .label {
font-size: 14px;
margin-bottom: 0px; }
.card .category i,
.card .label i {
font-size: 16px; }
.card .category {
color: #ccc5b9; }
.card .label {
text-shadow: none; }
.card .title {
color: #252422; }
.card > .title {
margin: 0;
padding: 30px 0 0; }
.card .content {
padding: 20px 20px 10px 20px; }
.card .content .title {
margin: 10px 0 20px 0; }
.card .content .category ~ .title {
margin-top: 10px; }
.card .content p ~ .title {
margin-top: -10px; }
.card p {
font-size: 16px;
color: #66615b; }
.card h6 {
font-size: 14px;
margin: 0; }
.card .card-footer {
padding: 15px 15px 20px; }
.card .card-footer .social-line .btn:first-child {
border-radius: 0 0 0 6px; }
.card .card-footer .social-line .btn:last-child {
border-radius: 0 0 6px 0; }
.card.card-separator:after {
height: 100%;
right: -15px;
top: 0;
width: 1px;
background-color: #DDDDDD;
content: "";
position: absolute; }
.card .icon {
display: block;
margin: 0 auto;
top: 60%;
position: relative;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
text-align: center; }
.card .icon i {
font-size: 60px;
padding: 18px;
width: 110px;
border: 2px solid #ccc5b9;
border-radius: 50%;
height: 110px; }
.col-lg-4 .card .icon i {
font-size: 80px;
padding: 22px; }
.card.card-with-border .content {
padding: 15px 15px 25px 15px; }
.card.card-with-border .card-footer {
padding-bottom: 25px; }
.card.card-with-border:after {
position: absolute;
display: block;
width: calc(100% - 10px);
height: calc(100% - 10px);
content: "";
top: 5px;
left: 5px;
border: 1px solid rgba(0, 0, 0, 0.15);
z-index: 1;
border-radius: 5px; }
.card.card-just-text .content {
padding: 50px 65px;
text-align: center; }
.card[data-background="image"] .image, .card[data-background="color"] .image {
border-radius: 6px; }
.card[data-background="image"] .title, .card[data-background="color"] .title {
font-weight: bold; }
.card[data-background="image"] .filter, .card[data-background="color"] .filter {
border-radius: 6px; }
.card[data-background="image"] .title,
.card[data-background="image"] .stats,
.card[data-background="image"] .category,
.card[data-background="image"] p,
.card[data-background="image"] .content,
.card[data-background="image"] .card-footer,
.card[data-background="image"] small,
.card[data-background="image"] .content a, .card[data-background="color"] .title,
.card[data-background="color"] .stats,
.card[data-background="color"] .category,
.card[data-background="color"] p,
.card[data-background="color"] .content,
.card[data-background="color"] .card-footer,
.card[data-background="color"] small,
.card[data-background="color"] .content a {
color: #FFFFFF; }
.card[data-background="image"] .content a:hover,
.card[data-background="image"] .content a:focus, .card[data-background="color"] .content a:hover,
.card[data-background="color"] .content a:focus {
color: #FFFFFF; }
.card[data-background="image"] .icon i, .card[data-background="color"] .icon i {
color: #FFFFFF;
border: 2px solid rgba(255, 255, 255, 0.6); }
.card[data-background="image"].card-with-border:after, .card[data-background="color"].card-with-border:after {
border: 1px solid rgba(255, 255, 255, 0.45); }
.card[data-background="image"] {
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
.card[data-background="image"] .filter {
opacity: 0.55; }
.card[data-background="image"]:hover .filter {
opacity: 0.75; }
.card[data-color="blue"] {
background: #b8d8d8; }
.card[data-color="blue"] .category {
color: #7a9e9f; }
.card[data-color="blue"] p {
color: #506568; }
.card[data-color="blue"] .icon i {
color: #506568;
border: 2px solid #7a9e9f; }
.card[data-color="green"] {
background: #d5e5a3; }
.card[data-color="green"] .category {
color: #92ac56; }
.card[data-color="green"] p {
color: #60773d; }
.card[data-color="green"] .icon i {
color: #60773d;
border: 2px solid #92ac56; }
.card[data-color="yellow"] {
background: #ffe28c; }
.card[data-color="yellow"] .category {
color: #d88715; }
.card[data-color="yellow"] p {
color: #b25825; }
.card[data-color="yellow"] .icon i {
color: #b25825;
border: 2px solid #d88715; }
.card[data-color="brown"] {
background: #d6c1ab; }
.card[data-color="brown"] .category {
color: #a47e65; }
.card[data-color="brown"] p {
color: #75442e; }
.card[data-color="brown"] .icon i {
color: #75442e;
border: 2px solid #a47e65; }
.card[data-color="purple"] {
background: #baa9ba; }
.card[data-color="purple"] .category {
color: #5a283d; }
.card[data-color="purple"] p {
color: #3a283d; }
.card[data-color="purple"] .icon i {
color: #3a283d;
border: 2px solid #5a283d; }
.card[data-color="orange"] {
background: #ff8f5e; }
.card[data-color="orange"] .category {
color: #e95e37; }
.card[data-color="orange"] p {
color: #772510; }
.card[data-color="orange"] .icon i {
color: #772510;
border: 2px solid #e95e37; }
.btn-center {
text-align: center; }
.card-big-shadow {
max-width: 320px;
position: relative; }
.card-big-shadow:before {
background-image: url("files/shadow.png");
background-position: center bottom;
background-repeat: no-repeat;
background-size: 100% 100%;
bottom: -12%;
content: "";
display: block;
left: -12%;
position: absolute;
right: 0;
top: 0;
z-index: 0; }
.card-big-shadow.full-card {
max-width: 100%; }
.card-image.card-big-shadow {
max-width: 100%; }
.card-image .card {
background-size: cover;
min-height: 430px;
width: 100%; }
.card-hover-effect {
cursor: pointer;
-webkit-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
-moz-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
-o-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
-ms-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease; }
.card-hover-effect:hover {
box-shadow: 0px 12px 17px -7px rgba(0, 0, 0, 0.3);
transform: translateY(-10px);
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-moz-transform: translateY(-10px); }
.card-user .image {
border-radius: 8px 8px 0 0;
height: 150px;
position: relative;
overflow: hidden; }
.card-user .image img {
width: 100%;
height: 150px; }
.card-user .image-plain {
height: 0;
margin-top: 110px; }
.card-user .author {
text-align: center;
text-transform: none;
margin-top: -65px; }
.card-user .author .title {
color: #403D39; }
.card-user .author .title small {
color: #ccc5b9; }
.card-user .avatar {
width: 100px;
height: 100px;
border-radius: 50%;
position: relative;
margin-bottom: 15px; }
.card-user .avatar.border-white {
border: 5px solid #FFFFFF; }
.card-user .avatar.border-gray {
border: 5px solid #ccc5b9; }
.card-user .title {
line-height: 24px; }
.card-user .content {
min-height: 240px; }
.card-user.card-plain .avatar {
height: 190px;
width: 190px; }
.card-image .details {
margin-left: 4px;
min-height: 50px;
padding: 0 4px 0.5em;
position: relative; }
.card-image .details .author {
margin-top: -21px; }
.card-image .details .author .name {
color: #66615b;
font-size: 1.1em;
font-weight: bold;
line-height: 1.15;
max-width: 11em;
overflow: hidden;
padding-top: 3px;
text-overflow: ellipsis; }
.card-image .details .author .name:hover, .card-image .details .author .name:active, .card-image .details .author .name:focus {
color: #403D39; }
.card-image .details .author img {
height: 40px;
width: 40px;
margin-bottom: 5px; }
.card-image .details .meta {
color: #ccc5b9;
font-size: 0.8em; }
.card-image .details .actions {
float: right;
font-size: 0.875em;
line-height: 2.6;
position: absolute;
right: 4px;
top: 36px;
z-index: 1; }
.card-image .details .actions .btn.btn-simple {
padding-left: 2px; }
.card-image .details-center {
text-align: center; }
.card-image .details-center .author {
position: relative;
display: inline-block;
text-align: left;
margin: 20px auto 0; }
.card-image .details-center .author img {
position: absolute;
left: 0;
top: 0; }
.card-image .details-center .author .text {
padding-left: 50px; }
.card-product .details .name {
margin-top: 20px; }
.card-product .details p {
display: inline-block;
margin-right: 60px; }
.card-product .details .actions {
top: 20px; }
.card-product .details .actions h5 {
color: #403D39; }
.btn-file {
position: relative;
overflow: hidden;
vertical-align: middle; }
.btn-file > input {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
margin: 0;
font-size: 23px;
cursor: pointer;
filter: alpha(opacity=0);
opacity: 0;
direction: ltr; }