/*Icons
------------------*/
span.icon-whitewine,
span.icon-whiteblendwine,
span.icon-rosewine,
span.icon-redwine,
span.icon-redblendwine{
	width: 60px;
	height: 76px;
	/*background-color: #FFF;*/
	display: block;
	position: absolute;
    bottom: -4px;
    right: -28px;
}

span.icon-whitewine{
	background-image: url('../images/white-wine-icon.svg');	
}

span.icon-whiteblendwine{
	background-image: url('../images/whiteblend-wine-icon.svg');
}

span.icon-rosewine{
	background-image: url('../images/rose-wine-icon.svg');
}

span.icon-redwine{
	background-image: url('../images/red-wine-icon.svg');
}

span.icon-redblendwine{
	background-image: url('../images/redblend-wine-icon.svg');
}

.archive-description.cpt-archive-description.my-page-wine-desc{
	padding: 18px 0 36px;
}

/*The Chart
------------------*/
ul.wine-chart{
	max-width: 1024px;
    margin: auto auto 24px auto;
}

ul.wine-chart li{
	display: inline-block;
	list-style: none;
	background: url(../images/halftone.png) repeat;
	padding: 4px 24px 4px 12px;
    position: relative;
	font-size: 2.2rem;
	font-family: "minion-pro-display",serif;
	font-weight: 600;
	font-style: italic;
    color: #B43E24;
	margin: 0 43px;
}

ul.wine-chart li span.winecon{
    bottom: -9px;
}

/*The Grid
-------------------*/
.gridtab>dd>.gridtab__controls{
    right: 11px !important;
    top: 9px !important;	
}

.gridtab>dd>.gridtab__controls>.gridtab__arrow, 
.gridtab>dd>.gridtab__controls>.gridtab__close{
	background: #B43E24 !important;	
}

.my-page-wine-wrap{
	padding-bottom: 106px !important;
	display: block;
}

.my-page-wine-wrap .gridtab>dt{
	background: #FFF;
	border: none;
    box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
	margin: 1%;
	cursor: pointer;
}

.my-page-wine-wrap .gridtab>dt:hover,
.my-page-wine-wrap .gridtab>dt:focus{
    box-shadow: 0 1px 3px rgba(34, 25, 25, 0.2);
}

.gridtab--0 > dt{
    min-width: calc(22% + 1px) !important;
    width: calc(22% + 1px) !important;
}

.my-page-wine-wrap .gridtab>dt h2{
	font-size: 2.2rem;
	color: #B43E24;
    margin-top: 2px;
    margin-bottom: 4px;
    max-width: 76%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.my-page-wine-wrap .gridtab>dt .wine-content,
.my-page-wine-wrap dd .wine-content{
	background: url(../images/halftone.png) repeat;
	padding: 12px;
    position: relative;
}

.my-page-wine-wrap dd .wine-content{
	padding: 24px;
}

.my-page-wine-wrap .gridtab--0>dd {
    min-width: calc(94% + 1px) !important;
    max-width: calc(94% + 1px) !important;
    margin: 14px !important;
	padding: 44px 35px 35px 35px !important;
}

.my-page-wine-wrap dd span.title{
	font-size: 2.4rem;
	color: #B43E24;
	display: block;
	font-weight: 600;
	margin-bottom: 14px;
	font-family: "minion-pro-display",serif;
	border-bottom: 1px solid #e0d6bd;
	padding-bottom: 12px;
}

.my-page-wine-wrap dd span.wine-type{
    font-family: "acumin-pro",sans-serif;
    font-size: 1.2rem;
    font-style: italic;
    /* background: #0A4553; */
    padding: 8px;
    color: #333;
    position: relative;
    top: 1px;
    margin-left: 10px;
    float: right;

}

.my-page-wine-wrap dd span.winecon{
bottom: 0px;
    right: 0px;
    background-repeat: no-repeat;
	background-color: #FFF;
}

.my-page-wine-wrap dd .wine-desc{
	padding-right: 48px;
}

span.no-wines{
	display: block;
	width: 100%;
	font-size: 5.0rem;
	font-style: italic;
	color: #525252;
	font-family: "tamarillo-jf",sans-serif;
	text-align: center;
	padding-top: 14px;
}

@media only screen and (max-width: 1024px) {
	.gridtab--0 > dt{
		min-width: calc(47% + 1px) !important;
		width: calc(47% + 1px) !important;
	}   
	
	ul.wine-chart{
		max-width: 800px;
	}
	
	ul.wine-chart li{
		margin: 0 28px;
	}
}

@media only screen and (max-width: 860px) {
	ul.wine-chart{
		max-width: 768px;
	}
	
	ul.wine-chart li{
		margin: 0 14px;
	}
}

@media only screen and (max-width: 760px) {
	ul.wine-chart{
		max-width: 500px;
	}
	
	ul.wine-chart li{
		margin: 14px 14px;
	}
}

@media only screen and (max-width: 600px) {
	.gridtab--0 > dt{
		min-width: calc(100% + 1px) !important;
		width: calc(100% + 1px) !important;
	}   
	
	ul.wine-chart li{
		margin: 14px 14px;
		width: 90%;
		display: none;
	}
}
