/**************************
*
*       SHARE
*
**************************/

div.shareoffer,
div.sharerequest,
.elc-inside .email,
.item-url a {
display: inline-block;
padding: 2px 8px 4px 8px;
color: white;
background: rgb(0,100,180);
border: none;
cursor: pointer;
transition: all 250ms ease-in;
}

div.shareoffer:hover,
div.sharerequest:hover {
color: rgb(0,100,180);
background: rgba(0,100,180,.1);
box-shadow: .3em .3em 0 rgba(0,100,180,.4);
}

.elc-inside .email:hover,
.item-url a:hover {
color: rgb(0,100,180);
background: white;
box-shadow: .3em .3em 0 rgba(0,100,180,.4);
}

a + div.shareoffer,
a + div.sharerequest {
float: right;
margin: 0 .5em 0 0;
}

div.shareoffer:before,
div.sharerequest:before,
.watchlist-button h3:before {
display: inline-block;
font-family: 'MDI';
font-size: 1.5em;
line-height: 0;
color: inherit;
content: '\F14E';
transform: translate(-4px,5px);
margin: 0;
}

.watchlist-button h3:before {
transform: translate(-6px,4px);
}

.watchlist-button {
color: white;
cursor: pointer;
transition: all 250ms ease-in;
}

.watchlist-button:hover {
color: rgb(0,100,180);
background: rgb(242,244,255);
}

.watchlist-button > div.empty {
display: none;
}

.watchlist-button > div {
display: flex;
flex-flow: row wrap;
margin: 0 auto;
max-width: 1264px;
padding: 8px 32px;
}

.watchlist-button span.open {
margin-right: auto;
}

.watchlist-button span.open:before {
display: inline-block;
font-family: 'MDI';
font-size: 2em;
line-height: 0;
color: inherit;
content: '';
width: .5em;
transition: all 100ms ease-in;
transform-origin: 50% 50%;
transform: translate(-.3em,.23em);
}

.watchlist-button:hover span.open:before,
.watchlist-button.active span.open:before {
transform: rotate(90deg);
}

.watchlist-button h3 {
display: inline;
margin: 0 .5em 0 0;
transform: translateY(1px);
}

.watchlist-button span.count {
display: inline-block;
height: 1.5em;
width: 1.5em;
line-height: 1.5em;
font-weight: bold;
text-align: center;
color: rgb(0,100,180);
background: white;
border-radius: 50%;
margin: 0 -.25em 0 0;
animation: crescendo 0.3s alternate ease-out;
}

.quickcontrol .watchlist-button {
position: absolute;
top: 10px;
right: 30px;
}

.quickcontrol .watchlist-button span {
border-radius: 50px;
width: 50px;
height: 50px;
font-size: 22px;
padding-top: 10px;
}

.watchlist-content {
display: none;
max-width: 1264px;
padding: 24px 32px;
background: rgba(255,255,255,.2);
}

.watchlist-content.active {
display: block;
animation: slowcrescendo 0.3s alternate ease-out;
}



/* - watchlist - */
.closewatchlist,
.closetranslation {
display: none;
}

.elc-inside {
width: 100%;
}

.elc-inside h4 {
font-size: 1.125em;
font-weight: bold;
color: white;
margin: 0 0 .25em 0;
}

.elc-inside h5 {
color: white;
margin: 0 0 1em 0;
}

.watchlist {
display: flex;
flex-flow: row wrap;
list-style-type: none;
margin: 0 0 1em 0;
}

.watchlist li {
background: rgba(255,255,255,.8);
padding: 1em 2em 1em 1em;
margin: 0 .5em .5em 0;
flex: 0 0 calc(50% - .5em);
}

.watchlist-text {
padding: 30px;
}

.item-url {
margin: .5em 0 0 0;
}

.item-url a:after {
display: inline-block;
font-family: 'MDI';
font-size: 1.5em;
line-height: 0;
content: '\F054';
transform: translate(3px,4px);
}

a.email:after {
display: inline-block;
font-family: 'MDI';
font-size: 1.5em;
line-height: 0;
content: '\F327';
transform: translate(5px,5px);
}

.removeoffer,
.removerequest{
float: right;
font-size: 1.5em;
display: block;
width: 1em;
height: 1em;
border-radius: 50%;
text-align: center;
line-height: 1em;
cursor: pointer;
color: black;
background: transparent;
transform: translateX(.75em);
transition: all 250ms ease-in;
}

.removeoffer:hover,
.removerequest:hover{
color: white;
background: rgb(0,100,180);
}


@keyframes crescendo {
0%   {transform: scale(.8);}
50% {transform: scale(1.4);}
100% {transform: scale(1);}
}

@keyframes slowcrescendo {
0%   {transform: scale(.95);}
50% {transform: scale(1.02);}
100% {transform: scale(1);}
}


/* ############# Screens bis 680px ############# */
@media only screen and (max-width: 680px) {
  
  .watchlist-button > div {
	padding: 8px 16px;
	}
  
  .watchlist-content {
	padding: 16px;
	}
	
	.watchlist li {
	flex-basis: 100%;
	}

}