.pageContainer section {
    padding-block: var(--section-padding-block);
}

/*Products Begin*/
.winesContainer.classicWine,
.productInfo{
	min-height: 300px;
	position: relative;	
	border-top: 1px solid var(--page-devider-color);
}

.winesContainer.classicWine::after,
.productInfo::after{
	content: "";
	position: absolute;
	width: 24px;
	height: 24px;
	
	border-top: 0;
	border-bottom: 1px solid var(--page-devider-color);
	border-left: 0;
	border-right: 1px solid var(--page-devider-color);
	
	top: 0;
	left: 50%;
	
	margin-left: -12px;
	margin-top: -12px;
	transform: rotate(45deg);
	background: white;

}

.pageContainer section.winesContainer{
    padding-block: 0px;
}
.winesContainer h2 {
    padding: 30px 0 0 0; 
}

.productList{
    max-width: var(--wrapper-max-width);
    margin-inline: auto;
    padding-inline: var(--inline-padding);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    flex-direction: row;
    
    
}

.productList > a{
   /* margin: 20px;
	padding: 2%;
*/
    text-align: center;
    
	flex-basis: 16%;
    
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

	text-decoration: none;
	
}

.productList > a,
.productList > a:visited{
	color: var(--menu-text-color);
}
.productList > a:hover{
	color: var(--main-ds-color);
}

.productList label img{
	max-width: 60px;
	margin-bottom: 15px;
}

.productList .title{
	
}

.winesTopContainer{
    background-image: url(../media/p_banner_img_1.png), url(../media/p_banner_img_1.png);
    background-repeat: no-repeat;
    background-position-x: -470px, calc(100% + 470px);
    background-position-y: center, center;
    background-size: auto 90%, auto 90%;
    transition:background-position 1s linear;
}


.productInfo{
    background-image: url(../media/p_banner_img_2.png), url(../media/p_banner_img_3.png);
    background-repeat: no-repeat;
    background-position-x: -400px, calc(100% + 500px);
    background-position-y: center, center;
    background-size: auto 80%, auto 80%;
    transition:background-position 1s linear;
    transition-delay: 750ms;
}

.winesTopContainer.show{
    background-position-x: -90px, calc(100% + 110px);
}


.productInfo.show{
    background-position-x: -75px, calc(100% + 110px);
}


.productInfo{
	display: grid;
	grid-template-columns: 
		minmax(var(--inline-padding), 1fr)
		minmax(0, calc(var(--wrapper-max-width) / 4))
		minmax(0, calc(var(--wrapper-max-width) / 4))
		minmax(0, calc(var(--wrapper-max-width) / 4))
		minmax(0, calc(var(--wrapper-max-width) / 4))
		minmax(var(--inline-padding), 1fr);
	position: relative;
	align-items: center;
	justify-items: center;
	
	text-align: justify;
}

.productInfo > div{
	grid-column:  2 / 6;
}

.bgRight{
	display: none;
}

@media (max-width: 1400px){
	.winesTopContainer{
		background-position-x: -250px, calc(100% + 260px);
	}

	.winesTopContainer.show{
	    background-position-x: -170px, calc(100% + 170px);
	}

	
	.productInfo{
    	background-position-x: -450px, calc(100% + 600px);
	}

	.productInfo.show{
	    background-position-x: -150px, calc(100% + 200px);
	}

	
}


@media (max-width: 1120px){
	.winesTopContainer{
		background-position-x: -750px, calc(100% + 750px);
	}

	.winesTopContainer.show{
	    background-position-x: -300px, calc(100% + 300px);
	}

	
	.productInfo{
    	background-position-x: -450px, calc(100% + 600px);
	}

	.productInfo.show{
	    background-position-x: -250px, calc(100% + 340px);
	}

}

@media (max-width: 950px){
	.winesTopContainer,
	.productInfo{
	    background-image: none;
	}
	
	.bgRight{
		display: unset;
		
		background-repeat: no-repeat;
		background-position-y: center;
		background-position-x: center;	
	    background-size: contain;
	    
	    background-image: url(../media/bg_product_info.jpg);

		width: 100%;
		height: 100%;
	}
		
}

@media (max-width: 832px){
	.productList{justify-content: space-evenly;}
	.productList > a{flex-basis: 25%;}
	
	

}


/*Products End*/




.modal {
  background: #e8e8e8;
  height: 1px;
  overflow: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: height 0.5s ease, width 0.5s ease 0.5s;
  width: 0;
  z-index: 1000;
  
}

.content {
  color: transparent;
  font-family: "Consolas", arial, sans-serif;
  font-size: 2em;
  position: absolute;
  top: 50%;
  text-align: center;
  transform: translate3d(0, -50%, 0);
  transition: color 0.5s ease;
  width: 100%;
}

label {
  cursor: pointer;
}

input {
  cursor: pointer;
  height: 0;
  opacity: 0;
  width: 0;
}
input:focus {
  outline: none;
}

input:checked {
  height: 40px;
  opacity: 1;
  position: fixed;
  right: 20px;
  top: 20px;
 
  -webkit-appearance: none;
  width: 40px;
  z-index: 10000;
}
input:checked::after, input:checked:before {
  border-top: 1px solid var(--menu-text-color);
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform: rotate(45deg);
  width: 100%;
   z-index: 10000;
   
}
input:checked::after {
  transform: rotate(-45deg);
}

input:checked + label {
  color: #FFF;
  transition: color 0.5s ease;
}

input:checked ~ .modal {
  height: 100%;
  width: 100%;
  transition: height 0.5s ease 0.5s, width 0.5s ease;
}


input:checked ~ .modal .modalContent {
	
	transition: color 0.5s ease 0.5s;

	display: flex;
	height: 100%;
	width: 100%;
    justify-content: center;
    align-items: center;
   
    color: var(--menu-text-color);
}

.modalContent .productImageContainer
{
	flex-basis: 50%;

	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    height: 80%;
    
}
.modalContent .productDescription
{

	flex-basis: 50%;
	display: flex;
    flex-direction: column;
    justify-content: center;
    
    padding: 20px;
    align-items: flex-start;
	text-align: left;
    
}

.modalContent > div img {height: 100%;}
.modalContent > div:first-child {border-right: 1px solid var(--page-devider-color);}


.productDescription p span{
	color: var(--page-devider-color); 
}

@media (max-width: 650px){
	
	input:checked ~ .modal .modalContent {
	transition: color 0.5s ease 0.5s;

	display: flex;

	height: 100%;
	width: 100%;

    color: var(--menu-text-color);
    
    flex-direction: column;
	}

	.modalContent .productImageContainer
	{
		display: flex;
	    justify-content: center;
	    height: 35%;
	    align-items: center;
	    
	  
	}
	.modalContent .productDescription
	{
		display: flex;
		flex-direction: column; 
		flex-grow: 1;
		padding: 0 10px; 
		text-align: center;
		align-items: center;
	}
	.modalContent .productDescription p{
		margin: 0; padding: 5px;
	}

.modalContent > div img {height: 80%;}
.modalContent > div:first-child {border-right: 0;}	
.modalContent > div:last-child {border-top: 1px solid var(--page-devider-color);}	

.semiSweetWine .modalContent .productDescription{font-size: 12px;}

}