.flex-container{
overflow:auto;
display: -webkit-flex;
display: flex;
flex-flow: row wrap;
overflow: auto;
position: relative;
align-items:center;
align-content:center;
justify-content:center;
}
@media (min-width: 1700px){
.flex-container{
max-width:95%;
}
}
.flex-item-box{
margin: 1.5rem 1.5rem;
box-shadow: 0 .4rem .8rem rgba(0,0,0,.15);
border: 1px solid rgba(0,0,0,.14);
border-radius: .2rem;
}
.carousel-inner{
border-top-left-radius:.15rem;
border-top-right-radius:.15rem;
}
.flex-content{
min-height:16rem;
}
.flex-item{
word-wrap: break-word;
max-width:350px;
margin-left:auto;
margin-right:auto;
flex: 1 0 350px;
}
@media (min-width: 576px) {
.flex-item{
max-width:280px;
margin-left:auto;
margin-right:auto;
flex: 1 0 280px;
}
}
@media (min-width: 700px) {
.flex-item{
max-width:350px;
flex: 1 0 350px;
}
}
@media (min-width: 850px) {
.flex-item{
max-width:370px;
flex: 1 0 370px;
}
}
@media (min-width: 900px) {
.flex-item{
max-width:300px;
flex: 1 0 300px;
}
}
@media (min-width: 1000px) {
.flex-item{
max-width:330px;
flex: 1 0 330px;
}
}
@media (min-width: 1060px) {
.flex-item{
max-width:350px;
flex: 1 0 350px;
}
}
@media (min-width: 1220px) {
.flex-item{
max-width:370px;
flex: 1 0 370px;
}
}
@media (min-width: 1330px) {
.flex-item{
max-width:330px;
flex: 1 0 330px;
}
}
@media (min-width: 1410px) {
.flex-item{
max-width:350px;
flex: 1 0 350px;
}
}
@media (min-width: 1550px) {
.flex-item{
max-width:370px;
flex: 1 0 370px;
}
}
@media (min-width: 1850px) {
.flex-item{
max-width:350px;
flex: 1 0 350px;
}
}
.flex-item.plus{
max-width:300px;
flex: 1 0 260px;
}
.flex-content > figure{
position:relative;
width:100%;
}
.flex-item .price-block{
transition:opacity .25s linear;
margin-left:1.75rem;
font-family:'Arial','Helvetica', 'sant-serif';
}
.flex-item .price-block .price-decimal{
font-size:80%;
}
.flex-item .price-block .price-symbol{
font-size:95%;
}
figcaption a{
display:inline-block;
padding: 0 .4em;
border-top-left-radius:0.2rem;
background-image: linear-gradient(to bottom, rgba(255,255,255,.7), rgba(255,255,255,1))
}
figcaption a:hover{
text-decoration:underline;
}
small.figure-filter{
position:absolute;
bottom:0;
right:0;
z-index:1;
}
a.product-link{
text-decoration:none;
color:black;
}
a.product-link strong{
letter-spacing:1px;
font-family:'Arial','Helvetica', 'sant-serif';
}
.favorite-products{
z-index:1;
position: absolute;
top: 0;
right: 0;
bottom:auto;
left:auto;
}
.favorite-products .btn:focus{
box-shadow: 0 0 0 .2rem rgba(200,89,178,.25)!important;
}
.favorite-products.active i{
color:hsl(40, 100%, 80%)!important;
}
.favorite-products.active .btn{
opacity:.8;
text-shadow: 0 0 1px rgba(0,0,0,1), 0 0 3px rgba(0,0,0,.9)!important;
}
figure:hover .favorite-products .btn
{
opacity: .7;
transition: opacity .15s ease;
color:white;
background-color: transparent;
border: 1px solid transparent;
text-shadow: 0 0 1px rgba(0,0,0,.5), 0 0 3px rgba(0,0,0,.5);
}
figure:hover .favorite-products .btn.favorite
{
color:#fc0!important;
text-shadow: 0 0 1px rgba(0,0,0,1), 0 0 3px rgba(0,0,0,.9)!important;
border: 1px solid #fc0!important;
}
figure .favorite-products .btn
{
opacity: .0;
transition: opacity .15s ease;
}
figure .favorite-products .btn:hover
{
opacity: 1;
transition: opacity .15s ease;
background-color: rgba(0,0,0,.05);
border: 1px solid rgba(255,255,255,.5);
}
figure .favorite-products .btn.favorite:hover
{
border: 1px solid rgba(255,204,0,.5)!important;
}
figure:hover .carousel-control-next-icon,
figure:hover .carousel-control-prev-icon
{
display: inline-block;
-webkit-animation: fadeIn .15s;
animation: fadeIn .15s;
}
figure .carousel-control-next-icon,
figure .carousel-control-prev-icon
{
display: none;
-webkit-animation: fadeOut .15s;
animation: fadeOut .15s;
}
@-webkit-keyframes fadeIn {
from { opacity: 0; }
to { opacity: .5; }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: .5; }
}
@-webkit-keyframes fadeOut {
from { opacity: .5; }
to { opacity: 0; }
}
@keyframes fadeOut {
from { opacity: .5; }
to { opacity: 0; }
}
.cool-link {
display: inline-block;
color: #000;
text-decoration: none;
}
.cool-link::after {
content: '';
display: block;
width: 0;
height: 2px;
background: #000;
transition: width .3s;
}
.cool-link:hover::after {
width: 100%;
//transition: width .3s;
}
.carousel-inner{
transition:height .6s ease-in-out;
}
div.spinner{
display:flex;
position:absolute;
z-index:1;
justify-content:center;
align-items:center;
width:100%;
height:100%;
}
div.spinner > div{
border-radius:.125rem;
background-image: radial-gradient(circle hsla(270, 100%, 71%,.2), hsla(270, 100%, 98%,.55));
border:1px solid rgba(255,255,255,.43);
box-shadow: 2px 2px 3px rgba(0,0,0,.3);
padding:1.5rem;
color:#fff;
}
.size-select{
}
.size-select > div{
display:inline-block;
line-height:0;
cursor:pointer;
}
.size-select .size-cm,
.size-select .size-inch{
transform-origin: 50% 50%;
transition: .15s linear;
opacity:1;
visibility: visible;
white-space:nowrap;
}
.rotatex{
transform: rotateX(90deg);
opacity:0;
visibility: hidden;
}
.size-select .hide{
display:none;
}
.size-change {
display:inline-block;
font-size:.9em;
transform: rotate(0deg);
transform-origin:50% 50%;
transition: .15s ease-in-out;
line-height:1.1;
}
.size-change.rotate {
transform: rotate(180deg);
}
.size-x{
font-size:80%;
color:#666;
}
.size-units{
font-size:90%;
}
.size-fade{
text-align:right;
padding-right:0.8rem;
line-height:0.5;
}
.size-fade > span{
font-size:80%;
cursor:pointer;
}
.product-artist{
font-size:70%;
}
.product-artist > a{
display:inline-block;
padding-left: .5rem;
padding-right: .5rem;
margin-bottom: .5rem;
border-bottom: 1px solid #dee2e6;
border-right: 1px solid #dee2e6 ;
border-bottom-right-radius:.25rem;
}
.product-artist:hover{
text-decoration:underline;
}
#filter{
z-index:10;
}
.figure-caption > div{
font-size:85%;
}