.eco-comparison-widget { margin: 0 0 12px 0; }

.eco-comparison-widget .select { display: table-cell; vertical-align: middle; padding: 0 0 12px 0; }
.eco-comparison-widget .select > div { display: table-cell; vertical-align: middle; padding: 4px 8px 4px 0; }
.eco-comparison-widget .select select {
    height: 36px;
    font-size: 20px;
    width: 166px;
    padding: 1px;
    font-family: 'Oswald',sans-serif;
    font-weight: 300;
}

.eco-comparison-widget .table {
    width: 100%;
    border-spacing: 0;
    border: 1px solid #ccc;
}

.eco-comparison-widget .table td { display: table-cell; width: 30%; padding: 4px 0; vertical-align: middle; text-align: center;}
.eco-comparison-widget .table td.product { margin: 0; border: none; }

.eco-comparison-widget .table td.col.score.left { padding: 4px 0 4px 8px; }
.eco-comparison-widget .table td.col.product.left { padding: 8px 0 4px 8px; }

.eco-comparison-widget .table td.col.score.right { padding: 4px 8px 4px 0; }
.eco-comparison-widget .table td.col.product.right { padding: 8px 8px 4px 0; }

.eco-comparison-widget .table td:first-child { width: 40%; }
.eco-comparison-widget .table tr.loading td { width: 100%; height: 120px; vertical-align: middle;}
.eco-comparison-widget .table tr.loading td .fa-spinner { font-size: 68px }

.eco-comparison-widget .table .col:first-child > div { text-align: center; }

.eco-comparison-widget .table .col.span-2 { width: 60%; }

.eco-comparison-widget .table .header { background-color: #eee; color: #000;  }
.eco-comparison-widget .table .footer { background-color: #eee; color: #000;  }




.eco-comparison-widget .table .header td { text-align: center; padding: 12px 0}
.eco-comparison-widget .table .footer td { text-align: left; padding: 12px 12px}
.eco-comparison-widget .table .footer td .buttons > * { display: inline-block; }
.eco-comparison-widget .table .footer td .buttons .fa-spinner { position: relative; top: 4px; }


.eco-comparison-widget .table .col .main { padding: 8px 0; position: relative;}
.eco-comparison-widget .table .col .main > span > span { display: table-cell; vertical-align: middle; position: relative;}

.eco-comparison-widget .table .col .main > div.why { display: block; position: absolute; right: 2px; bottom: 13px; }
.eco-comparison-widget .table .col .main > div.why svg { font-size: 32px;}



.slot-machine-mask {
    width: 100%;
    height: 100px;
    overflow: hidden; 
    position: relative;
    display: inline-block;
}

.slot-machine-items-container {
    position: absolute;
    width: 100%;
}

.slot-machine-item {
    height: 100px;
    width: 100px;
    margin: 0px;
    padding: 10px 0;
    background-size: contain;
}


/* product icons */
.eco-comparison-widget .header .col.product { text-align: center; }
.eco-comparison-widget .header .col.product div.icon-and-name { text-align: center; }
.eco-comparison-widget .header .col.product div.icon-and-name > * {
     display: block; text-align: center; vertical-align: middle;
}


.eco-comparison-widget .header .col.product div.icon-and-name > div.icon {
    width: 100%;
    height: 72px;
    background: url(../../img/widgets/icons/compostable.png) no-repeat;
    background-size: 72px !important;
    background-position: 50% 0 !important;
}
.eco-comparison-widget .header .col.product div.icon-and-name > div.icon.bags-for-life { background: url(../../img/widgets/icons/bags-for-life.png) no-repeat; }
.eco-comparison-widget .header .col.product div.icon-and-name > div.icon.bio-additive { background: url(../../img/widgets/icons/bio-additive.png) no-repeat; }
.eco-comparison-widget .header .col.product div.icon-and-name > div.icon.glass { background: url(../../img/widgets/icons/glass-packaging.png) no-repeat; }
.eco-comparison-widget .header .col.product div.icon-and-name > div.icon.metal { background: url(../../img/widgets/icons/metal-packaging.png) no-repeat; }
.eco-comparison-widget .header .col.product div.icon-and-name > div.icon.paper { background: url(../../img/widgets/icons/paper.png) no-repeat; }
.eco-comparison-widget .header .col.product div.icon-and-name > div.icon.recycled-polythene { background: url(../../img/widgets/icons/recycled-polythene.png) no-repeat; }
.eco-comparison-widget .header .col.product div.icon-and-name > div.icon.regular-polythene { background: url(../../img/widgets/icons/regular-polythene.png) no-repeat; }
.eco-comparison-widget .header .col.product div.icon-and-name > div.icon.cotton-bags{ background: url(../../img/widgets/icons/cotton-bags.png) no-repeat; }
.eco-comparison-widget .header .col.product div.icon-and-name > div.icon.im-green-polythene{ background: url(../../img/widgets/icons/im-green-polythene.png) no-repeat; }
.eco-comparison-widget .header .col.product div.icon-and-name > div.icon.biotransformation{ background: url(../../img/widgets/icons/biotransformation.png) no-repeat; }

.eco-comparison-widget .table .col div.icon { text-align: center; }

.eco-comparison-widget div.score {
    width: 100%;
    height: 100px;
    background: url(../../img/widgets/happy-emoji.png) no-repeat;
    background-size: 100px !important;
    background-position: 50% 0 !important;
}
.eco-comparison-widget div.score.negative { background: url(../../img/widgets/sad-emoji.png) no-repeat;  }
.eco-comparison-widget div.score.neutral { background: url(../../img/widgets/neutral-emoji.png) no-repeat;   }
.eco-comparison-widget div.score.blank { background: #fff; }

.eco-comparison-widget div.score.result.positive { background: url(../../img/widgets/trophy-eco-win-100x100.png) no-repeat; }
.eco-comparison-widget div.score.result.negative {
    background: url(../../img/widgets/neutral-icon-grey.png) no-repeat;
    background-size: 80px !important;
    background-position: 50% 6px !important;
}

.eco-comparison-widget div.score.result.draw {
    width: 100%;
    background: url(../../img/widgets/trophy-eco-draw-176x100.png) no-repeat;
    background-size: 176px !important;
    background-position: 50% 0 !important;
}




.eco-comparison-widget div.icon { position: relative; }
.eco-comparison-widget div.icon div.zap { transform: scale(0); z-index: 1;}
.eco-comparison-widget div.icon div.zap.fixed { opacity: 1; transform: scale(1); }

    .eco-comparison-widget div.icon div.zap.win {
        position: absolute;
        top: -10px;
        left: calc(50% - 118px);
        width: 100px;
        height: 100px;
        background: url(../../img/widgets/win-zap-06-gothic.png) no-repeat;
        background-size: 100px;
        background-repeat: no-repeat;
    }

.eco-comparison-widget div.icon div.zap.win.right { left: auto; right: calc(50% - 118px); }

.eco-comparison-widget div.icon div.zap.draw {
    position: absolute; 
    right: -68px; 
    top: 12px;
    width: 140px;
    height: 140px;
    background: url(../../img/widgets/draw-zap-06-gothic.png) no-repeat;
    background-size: 140px;
    background-repeat: no-repeat;
}





.eco-comparison-widget .table .col .hint { padding-left: 0px; width: 24px;  }
.eco-comparison-widget .table .col .hint svg { font-size: 20px;  }


.eco-comparison-widget .table .eco-factor .name-and-hint { text-align: center; padding: 0 0 6px 0;}
.eco-comparison-widget .table .eco-factor .name-and-hint > div { display: inline-block; text-align: center; height: 24px; }
.eco-comparison-widget .table .eco-factor .name-and-hint > div.hint { position: relative; top: -2px; }
.eco-comparison-widget .table .eco-factor .name-and-hint > div.name {
    font-family: 'Oswald',sans-serif;
    font-weight: 700;
    font-size: 18pt;
}
.eco-comparison-widget .table .eco-factor .name-and-hint > div.name.short { display: none; }



.eco-comparison-widget .table .col a.why svg,
.eco-comparison-widget .table .col .hint a.info svg {
    color: #666;
}

.eco-comparison-widget .table .col a.why.showing svg,
.eco-comparison-widget .table .col .hint a.info.showing svg { color: #be1278;  }


.eco-comparison-widget .table .col { position: relative; }
.eco-comparison-widget .table .col div.up-down { padding: 0; margin: 0; width: 100%; height: 25px; text-align: center;}

.eco-comparison-widget .table .col div.up-down.up { position: absolute; top: 6px;  }
.eco-comparison-widget .table .col div.up-down.down { position: absolute; bottom: 6px;  }

.eco-comparison-widget .table .col div.up-down a { background: url(../../img/widgets/sort-up-grey.png) no-repeat; background-size: 92px; width: 92px; height: 25px; display: inline-block; }
.eco-comparison-widget .table .col div.up-down.down a { background: url(../../img/widgets/sort-down-grey.png) no-repeat; background-size: 92px;    }
.eco-comparison-widget .table .col div.up-down.disabled a { opacity: 0.2; -moz-opacity: 0.2;   }

.eco-comparison-widget .table.show-all .col div.up-down { display: none; }


.eco-comparison-widget a.button { background: #be1278; font-size: 14px; margin: 6px 12px 6px 0; padding: 3px 12px; }
.eco-comparison-widget a.button.compare { padding: 3px 4px; }
.eco-comparison-widget a.button.compare span.icon { display: none; }

.eco-comparison-widget .select div.compare { padding-left: 4px;  }
.eco-comparison-widget .select div.compare > * { display: table-cell; vertical-align: middle;  }

.eco-comparison-widget .select div.compare span.auto-stepping,
.eco-comparison-widget .select div.compare a.resume { font-size: 24px; color: #666; padding-left: 8px;  }
.eco-comparison-widget .select div.compare a.resume { color: #be1278; }

.eco-comparison-widget .fa-spinner { color: #be1278; font-size: 24px; }

.eco-comparison-widget .table tr.eco-factor.hint td { vertical-align: top; padding: 12px; font-style: normal; font-size: 13px; }
.eco-comparison-widget .table tr.eco-factor.hint td a { font-size: 13px; }

.eco-comparison-widget .table tr.eco-factor.hint.horizontal { display: none; } /* kicks in thin view */
.eco-comparison-widget .table tr.eco-factor.hint.horizontal td * { font-size: 13px; }
.eco-comparison-widget .table tr.eco-factor.hint.horizontal div { padding: 8px;  }
.eco-comparison-widget .table tr.eco-factor.hint.horizontal div.top { font-style: italic;  }
.eco-comparison-widget .table tr.eco-factor.hint.horizontal div span.name { font-weight: bold; padding-right: 4px;  }



.eco-comparison-widget .table .header .col,
.eco-comparison-widget .table .header .col .name,
.eco-comparison-widget .table .footer .col,
.eco-comparison-widget .table .col > div.name {
    font-weight: bold;
    font-size: 28px;
    font-family: 'Oswald',sans-serif;
    font-weight: 300;
    font-size: 18pt;
}






/* responsive */
/* using "breakpoints" on the container div, avoids having multiple @media directives as side panels appear / disappear */

.eco-comparison-widget.b760 .table .eco-factor .name-and-hint > div.name { display: none;}
.eco-comparison-widget.b760 .table .eco-factor .name-and-hint > div.name.short { display: inline-block;}


.eco-comparison-widget.b640 div.icon div.zap.draw {
    background-size: 94px;
    right: -90px;
    top: 36px;
}
.eco-comparison-widget.b640 div.icon div.zap.win.left  { left: calc(50% - 96px); background-size: 78px; }
.eco-comparison-widget.b640 div.icon div.zap.win.right  {  right: calc(50% - 96px); background-size: 78px; }

.eco-comparison-widget.b600 .table tr.eco-factor.hint.vertical { display: none; }
.eco-comparison-widget.b600 .table tr.eco-factor.hint.horizontal { display: table-row; }
.eco-comparison-widget.b600 .table .header .col { font-size: 17pt;}
.eco-comparison-widget.b600 .table .header .col .name { font-size: 17pt;}

.eco-comparison-widget.b540 .table .eco-factor .name-and-hint > div.hint { display: none; }
.eco-comparison-widget.b540 .header .col.product div.icon-and-name > .name {
    display: none;
}
.eco-comparison-widget.b500 .select select { font-size: 17px; width: 131px; height: 34px; }
.eco-comparison-widget.b500 .table .header .col { font-size: 16pt;}
.eco-comparison-widget.b500 .table .eco-factor .name-and-hint > div.name.short { font-size: 16pt; }


/* phone thin */

.eco-comparison-widget.b420 a.button { min-width: 24px; padding: 3px 6px; }
.eco-comparison-widget.b420 a.button.compare span.text { display: none; }
.eco-comparison-widget.b420 a.button.compare span.icon { display: block; font-size: 15px;}
.eco-comparison-widget.b420 .select > div { padding: 4px 4px 4px 0; }

.eco-comparison-widget.b420 .select .compare { padding-left: 4px; }



.eco-comparison-widget.b400 { padding: 4px; }

.eco-comparison-widget.b400 div.score {
    background-size: 80px !important;
    background-position: 50% 6px !important;
}
.eco-comparison-widget.b400 div.score.draw {
    background-size: 150px !important;
    background-position: 50% 6px !important;
}

.eco-comparison-widget.b400 div.icon div.zap.draw {
    background-size: 84px;
    right: -95px;
    top: 36px;
}
.eco-comparison-widget.b400 div.icon div.zap.win.left  { left: calc(50% - 92px); background-size: 68px; }
.eco-comparison-widget.b400 div.icon div.zap.win.right  { right: calc(50% - 92px); background-size: 68px; }

.eco-comparison-widget.b360 span.auto-stepping { display: none; }

.eco-comparison-widget.b325 .select select {
    font-size: 15px;
    width: 122px;
    height: 30px;
}