/*
Theme Name: Dikrayaat
Theme URI: https://Dikrayaat.com
Author: Benso
Author URI: https://benso.nl/
Description: Coffeeshop Dikrayaat, wat in het Marokkaans 'Herinneringen' betekend. Is de gezelligste coffeeshop van heel Friesland!
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  Dikrayaat
*/

@font-face {
  font-family: 'Diavlo';
  src: url('css/fonts/DiavloMedium-Regular.eot'); /* IE9 Compat Modes */
  src: url('css/fonts/DiavloMedium-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('css/fonts/DiavloMedium-Regular.woff') format('woff'), /* Modern Browsers */
       url('css/fonts/DiavloMedium-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('css/fonts/DiavloMedium-Regular.svg#[]') format('svg'); /* Legacy iOS */

  font-style:   normal;
  font-weight:  700;
}
@font-face {
  font-family: 'Diavlo Bold';
  src: url('css/fonts/DiavloBold-Regular.eot'); /* IE9 Compat Modes */
  src: url('css/fonts/DiavloBold-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('css/fonts/DiavloBold-Regular.woff') format('woff'), /* Modern Browsers */
       url('css/fonts/DiavloBold-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('css/fonts/DiavloBold-Regular.svg#[]') format('svg'); /* Legacy iOS */

  font-style:   normal;
  font-weight:  700;
}

html,body{
  font-family: 'Diavlo';
  color: #fff;
  width: 100%;
  height: 100vh;
}

body{
  background: url(images/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.row{
  margin-left: 0;
  margin-right: 0;
}
.col-md-3{
  padding-left: 0;
  padding-right: 0;
}


.ribbon-container {
  background: transparent !important;
  position: relative;
  z-index: 1;
  margin-bottom: 30px;
  font-family: 'Diavlo';
}
.ribbon {
  background: url('images/ribbon-bg250x65.png') 0 10%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  /* background: #C6C6C6; */
  /* box-shadow: 2px 6px 12px rgba(0,0,0,0.5); */
  font-size: 0.9rem;
  line-height: 1.0;
  text-align: center;
  margin: 0 auto;
  padding: 0;
  position: relative;
  width: 285px;
  height: auto;
  border-radius: 2px;
}
.ribbon:before,
.ribbon:after {
  border: 1.5em solid hsl(0, 0%, 80%);
  content: '';
  display: block;
  position: absolute;
  bottom: -1.2em;
  z-index: -1;
}
.ribbon:before {
  left: -1.76em;
  border-right-width: 1.5em;
  border-left-color: transparent;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
.ribbon:after {
  right: -1.76em;
  border-left-width: 1.5em;
  border-right-color: transparent;
  box-shadow: -2px 2px 2px rgba(0,0,0,0.5);
}
.ribbon-content {
  /* border-top: 0.0625em dashed hsl(0, 0%, 45%);
  border-bottom: 0.0625em dashed hsl(0, 0%, 45%); */
  box-shadow: inset 0px 1px 1px rgba(0,0,0,0.08), inset 0px -1px 1px rgba(255,255,255,0.08), 0px -1px 1px rgba(255,255,255,0.2), 0px 1px 1px rgba(0,0,0,0.08);
  display: block;
  padding: 0.3875em 0 0.2875em; /*0.6875em*/
  text-transform: uppercase;
}
.ribbon-content:before,
.ribbon-content:after {
  content: '';
  display: block;
  position: absolute;
  border-style: solid;
  border-color: #393738 transparent transparent transparent;
  bottom: -1em;
}
.ribbon-content:before {
  left: 0;
  border-width: 1em 0 0 1em;
}
.ribbon-content:after {
  right: 0;
  border-width: 1em 1em 0 0;
}
.ribbon a {
  color: #3C3641;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.7em;
  font-weight: 700;
  font-family: 'Diavlo Bold';
}
.ribbon a:hover {
  color: hsl(330, 2%, 22%);
}

.item{
  width: 100%;
  min-height: 425px;
  display: block;
  border-right:2px solid #777;
}

.item-last{
  border-right: 0;
}

.grams{
  font-size: 1.2rem;
  color: #9b92c7;
  white-space: nowrap;
  padding-right: 5px;
}

.product{}

.product .productInfo{
  text-transform: uppercase;
  white-space: nowrap;
  font-size: 1.3rem;
}

.product .productInfo .name {
  font-size: 1.4rem;
  white-space: initial;
}

.product .productInfo .sweets .name,
.product .productInfo .preRolled .name{
  white-space: inherit;
}

.description{
  font-size: 1.2rem;
  color: #bfb6ec;
}

.description span{
  /* transform: scale(1);
	animation: pulse 2s infinite;
  border-radius: 50%; */
  margin: 0 4px;
}

.description span.country{
  margin: 0;
  text-transform: uppercase;
}

.verystrong {color: #e5332a;}
.strong     {color: #f89033;}
.medium     {color: #fffc00;}
.natural    {color: #009ee2;}
.exotic     {color: #a800ff;}
.sour       {color: #E61C72;}
.spicy      {color: #925f36;}
/*--in title--*/
.bio{
  content: '';
  display: inline-block;
  background:  url('images/bio-icon.png') no-repeat 0 bottom;
  background-size: 10px;
  width: 10px;
  height: 17px;
  margin-left: 5px;
}
.cured{
  content: '';
  display: inline-block;
  background:  url('images/cured-icon.png') no-repeat 0 bottom;
  background-size: 15px;
  width: 16px;
  height: 16px;
  margin-left: 2px;
}
/* @keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	}
} */

ul.leaders {
	padding: 0 10px;
}
ul.leaders li {
	display: table;
  line-height: 28px;
}
ul.leaders li span {
	display:     table-cell;
}
ul.leaders li span:first-child {
  position: relative;
	overflow: hidden;            /* Don't go underneath the price */
}
ul.leaders li span:first-child:after { /* dashes */
	content:        "";
	position:       absolute;
	bottom:         0.5em;       /* Set as you want */
	margin-left:    0.5em;       /* Keep same for the next span's left padding */
	width:          100%;
	border-bottom:  1px dashed #fff;
}
ul.leaders li span + span {
	text-align:     right;
	width:          1%;          /* Trick it */
	vertical-align: bottom;      /* Keep Price text bottom-aligned */
	padding-left:   0.5em;
}

.productOverview {
  padding: 0 20px;
  margin-top: -20px;
}
.productOverview span{
  display: inline-block;
  font-size: 22px;
}

.productOverview span.bio,
.productOverview span.cured{
  background-image: none;
  width: auto;
  color: #118c3d;
}
/* .productOverview span.bio{width: auto;} */

.productOverview span.bio img,
.productOverview span.cured img{
  width: 20px;
  height: 20px;
}
.productOverview span.bio img{height: 20px; width: 14px;}

.productOverview span.note{
  display: inline-block;
  float:right;
}