@charset "UTF-8";
.lui-form input:not([type="range"]), .lui-form select, .lui-form textarea {
    border: none; outline: 0;
    min-height: 40px;
    width: 100%;
    padding: 15px;
    resize: vertical;
    box-shadow: 0 0 0 transparent;
    background-color: hsl(225, 20%, 99%);
    border-bottom: solid 2px hsl(255, 20%, 94%);
} .lui-form textarea { min-height: 67px }
.lui-form input:not([type="range"]):focus, .lui-form textarea:focus { border-color: hsl(130, 40%, 64%); background-color: hsl(225, 20%, 98%); box-shadow: 0 0 0 transparent }
.lui-form input:not([type="range"])[v-name="n"] { text-transform: capitalize }
.lui-form .iti {
    display: block;
}
.lui-form .iti__selected-flag {
    outline: unset;
}
.lui-form .iti__country-list {
    border: unset;
}
.lui-form .iti__country, .lui-form .iti__divider {
    margin: 0 !important;
}
.lui-form .iti--allow-dropdown input[type=tel] {
    padding-left: 52px !important;
}

#lui-wisp { display: none !important }
/* ########################################################################## */
/* ############################## Navigation ################################ */
#app .app-flexd {
    min-height: 60px;
    max-height: 60px;
    background-color: hsl(0, 0%, 100%);
    border-bottom: solid 2px hsl(225, 15%, 95%);
}
.lui-func {
    -webkit-justify-content: space-between;
       -moz-justify-content: space-between;
            justify-content: space-between;
}
.lui-func > h1 {
    min-width: 225px;
    padding: 8px 0;
    font: 900 28px/0.8 'PoiretOne'; text-transform: capitalize;
}
.lui-func > h1 small {
    font-size: 16px;
    font-weight: 600;
    text-transform: none;
}


.lui-func > form {
    position: relative;
    min-width: 55%;
    background-color: hsl(225, 15%, 95%);
}
.lui-func > form input {
    width: 100%;
    outline: 0;
    border: none;
    padding: 10px 15px;
    background-color: transparent;
}
.lui-func > form button {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    font-size: 18px;
    border: none;
    outline: 0;
    cursor: pointer;
    padding: 8.5px 15px;
    color: hsl(225, 15%, 50%);
    background-color: transparent;
    -webkit-transition: all 0.10s ease-in-out;
       -moz-transition: all 0.10s ease-in-out;
         -o-transition: all 0.10s ease-in-out;
            transition: all 0.10s ease-in-out;
}
.lui-func > form button:hover { background-color: hsl(225, 15%, 91%) }


.lui-func > .lui-lined {
    min-width: 225px;
    -webkit-justify-content: space-between;
       -moz-justify-content: space-between;
            justify-content: space-between;
}
.lui-func > .lui-lined a { position: relative }
.lui-func > .lui-lined a + a { margin: 0 0 0 24px }
.lui-func > .lui-lined a > img { height: 30px }
.lui-func > .lui-lined a > em {
    margin: 0 0 0 10px;
    color: hsl(225, 20%, 64%);
    font: italic bold 15px 'PoiretOne';
}
.lui-func > .lui-lined a:hover > em { text-decoration: underline }


.lui-func > .lui-lined .lui-next > span {
    position: absolute;
    top: -4px;
    left: 12px;
    width: 16px;
    height: 17px;
    font: bold 12px/1.35 'PoiretOne';
    text-align: center;
    padding: 0px 3.5px;
    border-radius: 100%;
    color: hsl(0, 0%, 100%);
    background-color: hsl(130, 40%, 50%);
}



@media only screen and (max-width: 1280px) {
   #app .lui-func { padding: 0 20px }
   #app .lui-func > .lui-lined {
      min-width: inherit;
      -webkit-justify-content: flex-end;
         -moz-justify-content: flex-end;
              justify-content: flex-end;
   }
   /* #app .lui-func > .lui-lined a { margin: 0 } */
   /* #app .lui-func > .lui-lined a.lui-prev { display: none } */

   #app .lui-cart { padding: 30px 15px 50px }
}


@media only screen and (max-width: 960px) {

   #app .lui-func > form { display: none }

   #app .lui-cart {
      display: block;
      padding: 30px 15px 50px;
   }
   #app .lui-cart > div { width: 100% }
   #app .lui-cart > .lui-00L {
      padding: 0 0 40px;
      border-bottom: solid 1px hsl(225, 15%, 94%);
   }
   #app .lui-cart > .lui-00R {
      margin: 40px 0 0;
   }

}
@media only screen and (max-width: 600px) {
    
   #lui-cover {
      min-height: 256px;
      max-height: 256px;
   }

   #app .lui-func > form { display: none }
   #app .lui-func > .lui-lined { justify-content: flex-end }
   
   #app .lui-func > .lui-lined a { margin: 0 }
   #app .lui-func > .lui-lined a.lui-next em { display: none }

   #app .lui-cart .lui-00L .lui-form .lui-items .lui-list {
      display: inline-block;
      width: 100%;
      padding: 10px 0;
   }
   #app .lui-cart .lui-00L .lui-form .lui-items .lui-list > .info {
      padding: 0 20px 10px;
      margin: 0 0 15px;
      border-bottom: solid 1px hsl(225, 15%, 94%);
   }
   #app .lui-cart .lui-00L .lui-form .lui-items .lui-list > div:nth-child(n+2) {
      float: left;
   }

   #app .lui-cart .lui-00L .lui-form .lui-items .lui-list > .origin {
      margin-left: 20px;
   }
   #app .lui-cart .lui-00L .lui-form .lui-items .lui-list > .origin,
   #app .lui-cart .lui-00L .lui-form .lui-items .lui-list > .price {
      padding: 3.5px 0;
      width: 150px;
      text-align: center;
   }
   #app .lui-cart .lui-00L .lui-form .lui-items .lui-list > .disco { display: none }

}

@media only screen and (max-width: 480px) {
    
   #app .lui-func > .lui-lined a.lui-prev em { display: none }
   #app .lui-func > .lui-lined { min-width: inherit }
   #app .lui-cart {
      padding: 15px;
   }

   #app .lui-cart .lui-00L .lui-flow > a {
      padding: 10px 10px 10px 20px;
   }

   #app .lui-cart .lui-00L .lui-form .lui-items .lui-list > .origin,
   #app .lui-cart .lui-00L .lui-form .lui-items .lui-list > .price {
      width: 30%;
   }

   #app .lui-cart .lui-00L .lui-flow > a > .img { margin: 0 10px 0 0 }
   #app .lui-cart .lui-00L .lui-flow > a > .txt h4 { font-size: 12px }

}
/* ############################## Navigation ################################ */
/* ########################################################################## */






#app .app-field {}
/* ########################################################################## */
/* ################################# Intro ################################## */
.lui-intro { padding: 20px 0 }
.lui-intro > h1 {
    color: hsl(225, 15%, 45%);
    padding: 0 0 15px;
    text-align: center;
    font: italic bold 35px/1.35 'PoiretOne';
}
.lui-intro > h4 {
    padding: 15px 0 0;
    text-indent: 25px;
    line-height: 1.726432;
    border-top: dashed 1px hsl(225, 15%, 91%);
}
/* ################################# Intro ################################## */
/* ########################################################################## */






/* ########################################################################## */
/* ################################ Unknow ################################## */
.lui-cart {
    padding: 30px 0 50px;
    -webkit-align-items: flex-start !important;
            align-items: flex-start !important;
    -webkit-justify-content: space-between;
       -moz-justify-content: space-between;
            justify-content: space-between;
}
.lui-cart .lui-00L { width: calc((100% - 320px) - 40px) }
.lui-cart .lui-00R { width: calc(100% - (100% - 320px)) }


.lui-cart .lui-00L .lui-flow {
    background-color: hsl(225, 15%, 100%);
    box-shadow: 0 2px 5px hsla(225, 15%, 91%, 0.08);
    -webkit-justify-content: space-between;
       -moz-justify-content: space-between;
            justify-content: space-between;
}
.lui-cart .lui-00L .lui-flow.ignore > a:nth-child(2) {
    display: none !important;
}
.lui-cart .lui-00L .lui-flow > a {
    position: relative;
    width: 100%;
    padding: 11px 32px;
}
.lui-cart .lui-00L .lui-flow > a > .img {
    width: 32px;
    height: 32px;
    margin: 0 20px 0 0;
    background-repeat: no-repeat;
    background-position: center center;
}
.lui-cart .lui-00L .lui-flow > a > .txt h4 {
    font-weight: 600;
    color: hsl(225, 15%, 30%);
}
.lui-cart .lui-00L .lui-flow > a > .txt h5 {
    font-weight: 300;
    color: hsl(225, 15%, 50%);
}
.lui-cart .lui-00L .lui-flow > a.focus { background-color: hsl(225, 20%, 95%) }
.lui-cart .lui-00L .lui-flow > a.focus::after {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 0;
    content: '';
    width: 1.14285714em;
    height: 1.14285714em;
    background-color: hsl(225, 20%, 95%);
    transform: translateY(-50%) translateX(50%) rotate(-45deg);
}
.lui-cart .lui-00L .lui-flow > a:last-child::after { display: none !important }


.lui-cart .lui-00L .lui-form { padding: 30px 0 0 }
.lui-cart .lui-00L .lui-form .lui-that {
    position: relative;
    padding: 0 0 5px;
    border-bottom: solid 1px hsl(225, 15%, 94%);
}
.lui-cart .lui-00L .lui-form .lui-that > h3 { font: italic bold 18px 'PoiretOne' }
.lui-cart .lui-00L .lui-form .lui-that > span {
    position: absolute;
    top: 5px;
    right: 0;
    font-size: 11px;
    color: hsl(225, 20%, 64%);
}
.lui-form .lui-that-ignore {
    text-align: right;
    margin: 5px 0;
}
.lui-form .lui-that-ignore input {
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 20px;
    height: 20px;
    min-height: unset;
    vertical-align: bottom;
}
.lui-form .lui-that-ignore label {
    margin-left: 5px;
    cursor: pointer;
}


.lui-cart .lui-00L .lui-form .lui-items { padding: 20px 0 0 }
.lui-cart .lui-00L .lui-form .lui-items .lui-list {
    position: relative;
    padding: 10px 20px;
    margin: 0 0 20px;
    background-color: hsl(225, 15%, 100%);
    box-shadow: 0 2px 5px hsla(225, 15%, 88%, 0.12);
    -webkit-justify-content: space-between;
       -moz-justify-content: space-between;
            justify-content: space-between;
}
.lui-cart .lui-00L .lui-form .lui-items .lui-list:last-child { margin: 0 }

.lui-cart .lui-00L .lui-form .lui-items .lui-list > .info { min-width: 35% }
.lui-cart .lui-00L .lui-form .lui-items .lui-list > .info .img {
    margin: 0;
    width: 64px;
    height: 64px;
    pointer-events: none;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.lui-cart .lui-00L .lui-form .lui-items .lui-list > .info div {
    font-weight: 700;
    margin: 0 0 0 15px;
}
.lui-cart .lui-00L .lui-form .lui-items .lui-list > .info div > small { font-weight: normal }

.lui-cart .lui-00L .lui-form .lui-items .lui-list > .qty {
    position: relative;
}
.lui-cart .lui-00L .lui-form .lui-items .lui-list > .qty > a {
    font-weight: 600;
    font-size: 20px;
    width: 30px;
    height: 30px;
    text-align: center;
    background-color: hsl(225, 20%, 95%);
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-justify-content: center;
       -moz-justify-content: center;
            justify-content: center;
    -webkit-transition: all 0.10s ease-in-out;
       -moz-transition: all 0.10s ease-in-out;
         -o-transition: all 0.10s ease-in-out;
            transition: all 0.10s ease-in-out;
}
.lui-cart .lui-00L .lui-form .lui-items .lui-list > .qty > a:hover { background-color: hsl(225, 20%, 91%) }
.lui-cart .lui-00L .lui-form .lui-items .lui-list > .qty > span {
    padding: 5.5px 0;
    width: 30px;
    max-height: 30px;
    text-align: center;
    border-top: solid 1px hsl(225, 20%, 95%);
    border-bottom: solid 1px hsl(225, 20%, 95%);
}
.lui-cart .lui-00L .lui-form .lui-items .lui-list > .disco,
.lui-cart .lui-00L .lui-form .lui-items .lui-list > .price {
    min-width: 100px;
    text-align: center;
}
.lui-cart .lui-00L .lui-form .lui-items .lui-list > .disco { color: hsl(0, 100%, 64%) }
.lui-cart .lui-00L .lui-form .lui-items .lui-list > .price { font-weight: 600 }
.lui-cart .lui-00L .lui-form .lui-items .lui-list > .action > a {
    font-size: 18px;
    width: 30px;
    height: 30px;
    border: solid 1px hsl(225, 15%, 95%);
    -webkit-justify-content: center;
       -moz-justify-content: center;
            justify-content: center;
    -webkit-transition: all 0.10s ease-in-out;
       -moz-transition: all 0.10s ease-in-out;
         -o-transition: all 0.10s ease-in-out;
            transition: all 0.10s ease-in-out;
}
.lui-cart .lui-00L .lui-form .lui-items .lui-list > .action > a + a { margin: 0 0 0 5px }
.lui-cart .lui-00L .lui-form .lui-items .lui-list > .action > a:hover { background-color: hsl(225, 20%, 95%) }
.lui-cart .lui-00L .lui-form .lui-items .lui-list > div:nth-child(2),
.lui-cart .lui-00L .lui-form .lui-items .lui-list > div:nth-child(4),
.lui-cart .lui-00L .lui-form .lui-items .lui-list > div:nth-child(5) {
  white-space: nowrap;
}




.lui-cart .lui-00R {
    background-color: hsl(0, 0%, 100%);
    box-shadow: 0 2px 5px hsla(225, 15%, 91%, 0.08);
}
.lui-cart .lui-00R > h3 {
    font-weight: 800;
    padding: 0 20px;
    height: 54px;
    text-transform: uppercase;
    background-color: hsl(225, 15%, 95%);
}
.lui-cart .lui-00R > ul { padding: 20px }
.lui-cart .lui-00R > ul li {
    padding: 5px 0 5px;
    text-transform: capitalize;
    border-bottom: solid 1px hsl(225, 15%, 96%);
    -webkit-justify-content: space-between;
       -moz-justify-content: space-between;
            justify-content: space-between;
}
.lui-cart .lui-00R > ul li:hover { background-color: hsl(225, 15%, 99%) }
.lui-cart .lui-00R > ul li:last-child { border-bottom: none }
.lui-cart .lui-00R > ul li:last-child > span { font-weight: 700 }
.lui-cart .lui-00R > ul li:nth-child(2) > span:nth-child(2) { color: hsl(0, 100%, 66%) }
.lui-cart .lui-00R  a.continue, .lui-cart .lui-00R > a.checkout {
    text-transform: uppercase;
    text-align: center;
    display: block;
    padding: 15px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: hsl(0, 0%, 100%);
    background-color: hsl(130, 40%, 50%);
    -webkit-transition: all 0.10s ease-in-out;
       -moz-transition: all 0.10s ease-in-out;
         -o-transition: all 0.10s ease-in-out;
            transition: all 0.10s ease-in-out;
}
.lui-cart .lui-00R  a.lui-prev {
    text-transform: uppercase;
    text-align: center;
    display: block;
    padding: 15px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: hsl(0, 0%, 100%);
    background-color: hsl(0, 100%, 66%);
    -webkit-transition: all 0.10s ease-in-out;
       -moz-transition: all 0.10s ease-in-out;
         -o-transition: all 0.10s ease-in-out;
            transition: all 0.10s ease-in-out;
}
.lui-cart .lui-00R > a:hover { background-color: hsl(130, 40%, 51%); text-decoration: underline }

.lui-cart .lui-00R > .lui-note {
    padding: 20px 0 0;
    color: hsl(0, 100%, 66%);
    background-color: hsl(225, 10%, 98%);
}


@media only screen and (max-width: 768px) {
  #app .lui-list > div:nth-child(2) {

  }
}
/* ################################ Unknow ################################## */
/* ########################################################################## */







/* ########################################################################## */
/* ################################ Billing ################################# */
form .lui-err:not(.show) { display: none }
form .lui-err {
   position: relative;
   line-height: 1.666;
   margin: 15px 0 0;
   padding: 5px 30px 5px 60px;
   color: hsl(0, 100%, 68%);
   background-color: hsl(0, 100%, 98%);
   border: solid 1px hsl(0, 100%, 91%);
}
form .lui-err > i {
   position: absolute;
   line-height: 30px;
   text-align: center;
   top: -1px;
   left: -1px;
   bottom: -1px;
   min-width: 50px;
   font-size: 1.5rem;
   color: hsl(0, 100%, 95%);
   background-color: hsl(0, 100%, 68%);
   -webkit-justify-content: center;
      -moz-justify-content: center;
           justify-content: center;
}



.lui-buyer {
	position: relative;
	margin: 30px 0 0;
	padding: 40px;
	background-color: white;
}
.lui-buyer .lui-info li {
	position: relative;
	margin: 0 0 20px;
}

.lui-buyer .lui-info li.lui-cardjs .lui-title {
	padding: 10px 15px;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	color: hsl(225, 20%, 97%);
	background-color: hsl(225, 20%, 32%);
}
.lui-buyer .lui-info > ul > li.lui-cardjs > .card-js { padding: 15px }
.lui-buyer .ui--payment-container {
    padding: 20px 5px;
}
.lui-buyer .ui--payment-methods {
    justify-content: start;
}
.lui-buyer .card-number-wrapper {
    margin-bottom: 0;
}



/* .lui-play {} */
.lui-play-type {
	display: flex;
	justify-content: flex-start;
	padding: 10px 0;
	margin: 0 0 10px;
}
.lui-play-type .column {
	display: inline-block;
	width: calc(60% / 2);
	margin-right: 20px;
}
.lui-play-type .column label {
	display: block;
	width: 100%;
	padding: 10px;
	font-weight: 600;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 4px;
	border: solid 1px hsl(225, 20%, 92%);
}
.lui-play-type .column input {
	position: absolute;
	width: auto;
	opacity: 0;
	margin: 0 0 0 14px;
	pointer-events: none;
}
.lui-play-type .column label.active {
	border-color: #00897B;
	background-color: #E8F5E9;
}



.lui-banking {
	position: relative;
	padding: 0 20px;
	width: 100%;
	text-align: center;
}
.lui-banking .list {
	display: inline-block;
	width: 200px;
	margin: 0 20px 20px 0;
	overflow: hidden;
	border-radius: 4px;
	border: solid 1px #e7e9ef;
}
.lui-banking .list input {
	width: 24px;
	height: 24px;
	min-height: unset;
	margin-top: 5px;
	opacity: 0.7;
}
/* .lui-banking .list label {} */
.lui-banking .list img {
	display: block;
	width: 100%;
	border-radius: 2px;
}



.lui-buyer .lui-conditions {
	margin: 40px 0 0;
}
.lui-buyer .lui-conditions .lui-agree {
	position: relative;
	margin: 25px 0 0;
	-webkit-justify-content: flex-start;
		-moz-justify-content: flex-start;
			justify-content: flex-start;
}
.lui-buyer .lui-conditions .lui-agree input { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none }
.lui-buyer .lui-conditions .lui-agree label {
	margin: 0 0 0 25px;
	cursor: pointer;
}
.lui-buyer .lui-conditions .lui-agree label::before {
	position: absolute;
	left: -1px;
	padding: 1.5px;
	content: "\f00c";
	color: hsl(0, 0%, 100%);
	border: solid 1px hsl(225, 20%, 64%);
	font: normal normal normal 12px/1 'awesome';
}
.lui-buyer .lui-conditions .lui-agree input:checked + label::before {
	border-color: hsl(130, 40%, 50%);
	background-color: hsl(130, 40%, 50%);
}
.lui-buyer .lui-conditions .lui-agree input:not(:checked) + label.err { color: hsl(0, 100%, 66%); border-bottom: dashed 1px hsl(0, 100%, 66%) }
.lui-buyer .lui-conditions .lui-agree a { font-weight: 600; color: hsl(130, 40%, 47%); text-decoration: underline }
.lui-buyer .lui-conditions .lui-terms { padding: 10px 0 }
.lui-buyer .lui-conditions .lui-terms h3 { font-weight: 700 }
.lui-buyer .lui-conditions .lui-terms ul { padding: 5px 0 0 20px }
.lui-buyer .lui-conditions .lui-terms ul li {
	margin: 0 0 7px;
	font-size: 13px;
	list-style-type: square;
}



.lui-form label {
	font-size: 14px;
	font-weight: 700;
}
.lui-form label.require::after {
    content: ' *';
    font-size: 12px;
    color: hsl(0, 100%, 66%);
}
.lui-form .v-err {
    display: none;
    font-size: 12px;
    color: hsl(0, 100%, 66%);
}
.lui-form .v-count {
  font-size: 12px;
  font-style: italic;
  color: hsl(130, 40%, 50%);
}
.disabled {
	/*pointer-events: none;*/
	opacity: 0.72;
	cursor: no-drop;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}



@media only screen and (max-width: 768px) {
	#app .lui-banking .list {
		width: 150px;
	}
}

@media only screen and (max-width: 440px) {
	#app .card-js .card-number-container,
	#app .card-js .cvc-container,
	#app .card-js .expiry-container,
	#app .card-js .card-name-container {
		width: 100%;
		float: none;
	}

	#app .lui-buyer {
		padding: 20px 10px;
	}
	#app .lui-play-type {
		justify-content: space-between;
	}
	#app .lui-play-type .column {
		width: calc(95% / 2);
		margin: 0;
	}
	#app .lui-play-type .column label {
		height: 100%;
	}

	#app .lui-cardjs .card-js {
		padding: 15px 5px;	
	}
	#app .lui-banking {
		padding: 0;
	}
	#app .lui-banking .list {
		width: 128px;
		margin: 5px;
	}

	#app .lui-cart > .lui-00R {
		max-width: none;
		margin-top: 20px;
	}
}
/* ################################ Billing ################################# */
/* ########################################################################## */







/* ########################################################################## */
/* ################################ Preview ################################# */
.lui-pack {
    margin: 25px 0 0;
    background-color: hsl(225, 15%, 100%);
    box-shadow: 0 2px 5px hsla(225, 15%, 91%, 0.08);
    -webkit-justify-content: space-between;
       -moz-justify-content: space-between;
            justify-content: space-between;
}
.lui-pack .lui-head {
    border-bottom: solid 2px hsl(225, 15%, 95%);
}
.lui-pack .lui-head .lui-force {
    padding: 10px 20px;
    min-width: 320px;
}
.lui-pack .lui-head .lui-force .img {
    width: 64px;
    height: 64px;
    margin: 0 15px 0 0;
    pointer-events: none;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.lui-pack .lui-head .lui-force div { font-weight: 700 }
.lui-pack .lui-head .lui-force div > small { font-weight: normal }


.lui-pack .lui-head .lui-block {
    overflow-y: hidden;
    overflow-x: overlay;
    min-width: calc(100% - 320px);
}
.lui-pack .lui-head .lui-block ul { padding: 6px }
.lui-pack .lui-head .lui-block ul li {
    margin: 0 15px 0 0;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 100%;
    font: bold 16px 'PoiretOne';
    color: hsl(225, 15%, 64%);
    border: solid 2px hsl(225, 15%, 98%);
    box-shadow: 0 0 0 2.5px hsl(225, 20%, 94%);
    -webkit-justify-content: center;
       -moz-justify-content: center;
            justify-content: center;
    -webkit-transition: all 0.10s ease-in-out;
       -moz-transition: all 0.10s ease-in-out;
         -o-transition: all 0.10s ease-in-out;
            transition: all 0.10s ease-in-out;
}
.lui-pack .lui-head .lui-block ul li:hover, .lui-pack .lui-head .lui-block ul li.focus {
    color: hsl(0, 0%, 100%);
    border-color: hsl(0, 0%, 100%);
    background-color: hsl(130, 50%, 64%);
}
.lui-pack .lui-head .lui-block ul li.focus { width: 37px; height: 37px }
.lui-pack .lui-head .lui-block ul li img {
    display: block;
    width: 45px;
    margin: 4px auto;
    pointer-events: none;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}


.lui-pack .lui-body {
    position: relative;
    padding: 20px;
}
.lui-pack .lui-body ul { position: relative }
.lui-pack .lui-body ul > li {
    display: none;
    pointer-events: none; opacity: 0;
}
.lui-pack .lui-body ul > li.show {
    display: flex;
    display: -webkit-flex;
    pointer-events: auto; opacity: 1;
}
.lui-pack .lui-body ul > li > figure {
    position: relative;
    margin: 0;
}
.lui-pack .lui-body ul > li {
    align-items: flex-start;
    -webkit-align-items: flex-start;
}
.lui-pack .lui-body ul > li > figure:nth-child(1) { width: calc(100% / 2); margin: 0 15px 0 0 }
.lui-pack .lui-body ul > li > figure:nth-child(2) { width: calc(100% / 2); margin: 0 0 0 15px }
.lui-pack .lui-body ul > li > figure:nth-child(1) {
    box-shadow: 0 0 0 3px hsl(225, 20%, 96%);
    border: solid 2px hsl(0, 0%, 100%);
}
.lui-pack .lui-body ul > li .lui-logo img {
    display: block;
    height: 100px; margin: 0 auto 10px;
}

.lui-pack .lui-body ul > li .lui-info {
   position: relative;
   text-align: right;
    color: hsl(0, 0%, 100%);
    text-transform: capitalize;
    font: normal 32px/1 'PoiretOne';

    align-items: flex-end;
    -webkit-align-items:  flex-end;
    -webkit-justify-content: flex-end;
       -moz-justify-content: flex-end;
            justify-content: flex-end;

    padding: 8px;
    height: 188px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    background-image: url(../assets/v3/img/pk3.jpg);
 }
.lui-pack .lui-body ul > li .lui-info::before {
   position: absolute;
   top: 10px;
   left: 10px;
   content: '';
   width: 80px;
   height: 80px;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: left top;
   background-image: url(../assets/v3/img/logo-w.png);
}

.lui-pack .lui-body ul > li .lui-data { padding: 15px 15px 20px }
.lui-pack .lui-body ul > li .lui-data .lui-name { text-transform: capitalize }
.lui-pack .lui-body ul > li .lui-data > p {
   overflow: hidden;
   display: block;
    margin: 10px 0;
    text-indent: 20px;
    text-align: justify;
    white-space: pre-line;
}
.lui-pack .lui-body ul > li .lui-data > .lui-from { margin: 4px 0 }

.lui-pack .lui-body ul > li .lui-key {
    text-transform: uppercase;
    padding: 12px 0 5px;
    font-size: 36px;
    text-align: center;
    color: hsl(225, 20%, 25%);
    background-color: hsla(0, 0%, 100%, 0.72);
}
.lui-pack .lui-body ul > li .lui-key > .lui-h2 { font-family: 'Libre Barcode 39 Extended Text', cursive }


.lui-pack .lui-body ul > li .lui-input { margin: 0 0 20px }
.lui-pack .lui-body ul > li .lui-input.btn { text-align: right }
.lui-pack .lui-body ul > li .lui-input.btn > a {
    text-align: center;
    min-width: 110px;
    padding: 8px 0;
    margin: 0 0 0 10px;
    background-color: hsl(225, 20%, 91%);
}
.lui-pack .lui-body ul > li .lui-input.btn > a:hover { color: hsl(0, 0%, 100%); background-color: hsl(130, 40%, 55%) }


.lui-pack .lui-body ul > li .lui-input.chk { position: relative }
.lui-pack .lui-body ul > li .lui-input.chk > input { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none }
.lui-pack .lui-body ul > li .lui-input.chk > label {
    margin: 0 0 0 25px;
    cursor: pointer;
    font-size: 12px;
}
.lui-pack .lui-body ul > li .lui-input.chk > label::before {
    position: absolute;
    left: -1px;
    padding: 1.5px;
    content: "\f00c";
    color: hsl(0, 0%, 100%);
    border: solid 1px hsl(225, 20%, 64%);
    font: normal normal normal 12px/1 'awesome';
}
.lui-pack .lui-body ul > li .lui-input.chk > input:checked + label::before {
    border-color: hsl(130, 40%, 50%);
    background-color: hsl(130, 40%, 50%);
}


@media only screen and (max-width: 768px) {

   #app .lui-pack .lui-body > ul {
      overflow-x: auto;
      padding: 3px;
      padding-bottom: 25px;
   }
   #app .lui-pack .lui-body figure:nth-child(1) {
      min-width: 375px;
      max-width: 375px;
   }
   #app .lui-pack .lui-body figure:nth-child(2) {
      min-width: 320px;
      max-width: 320px;
   }

}

#app .lui-body > .lui-lux {
  display: none
}
@media only screen and (max-width: 768px) {
  #app .lui-body {
    overflow-x: hidden;
  }
  #app .lui-body ul {
    padding: 0;
  }
  #app .lui-body > .lui-lux {
    position: absolute;
    z-index: 10;
    top: 50%;
    cursor: pointer;
    display: inline;
    border-radius: 100%;
    transform: translateY(-50%);
    background-color: hsl(130, 50%, 64%);
    border: solid 1px white;
    box-shadow: 0 0 0 2.5px hsl(225, 20%, 94%);

    opacity: 0.7;
    width: 40px;
    height: 40px;
    padding: 8px 4px 0;
  }
  #app .lui-body > .lui-lux span {
    color: white;
    font-size: 20px;
    font-weight: 900;
  }
  #app .lui-body > .lui-lux.lui-prev {
    text-align: right;
    left: -17px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  #app .lui-body > .lui-lux.lui-next {
    text-align: left;
    right: -17px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

@media only screen and (max-width: 480px) {
  #app .lui-pack .lui-head { display: block }
  #app .lui-pack .lui-head > .lui-block {
    padding: 0 20px;
    border-top: solid 1px hsl(225, 15%, 95%);
  }
  #app .lui-buyer .lui-conditions {
    margin: 0;
  }
}
/* ################################ Preview ################################# */
/* ########################################################################## */