@charset "utf-8";

.txt-col					{ z-index:1; max-width:800px; margin:0 auto; line-height:1.5; }
.txt-col p					{ margin:0.8em 0;  }

/* Top Section */
#Intro						{}
#Intro	.lxry-logo			{ z-index:1; max-width:400px; width:60%; margin:5em auto 3em; }
#Intro	h1					{ z-index:2; }
#Intro	.img-ice-collection { z-index:0; max-width:1040px; width:90%; margin:-6% auto -6%; }
#Intro	.sub-hd				{ z-index:4; }

@media only screen and (min-width: 769px){
    #Intro	.sub-hd			{ font-size:1.6em !important; }
}

.img-row					{ display:flex; flex-wrap:wrap; justify-content:center; gap:4em; max-width:1260px; margin:3em auto; padding:0; }
.img-row.images-3			{}
.img-row.images-3 > .img	{ width:calc(33% - 3em); }

/* Designed for */
#DesignedFor .img-ice-collection { z-index:0; max-width:800px; width:80%; margin:-4% auto -6%; }

/* Tick Grid Section */
.tick-grid-section {
    padding: 2em 0;
}
.tick-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
    max-width: 1100px;
    margin: 0 auto;
    list-style: none;
    padding: 0;
}
.tick-grid li {
    display: flex;
    align-items: center;
    width: 330px;
    gap: 2px;
    padding: 5px;
    border-radius: 10px;
    min-height: 84px;
    background: linear-gradient(135deg, #000 0%, #000 25%, #18181F 100%);
    font-size: 19px;
    font-weight: 300;
    color: #ECECFB;
    line-height: 1.4;
    overflow: hidden;
}
.tick-grid li::before {
    content: '';
    display: block;
    width: 82px;
    height: 82px;
    flex-shrink: 0;
    background: url('../images/icon/tick-gold-01.jpg') no-repeat center center;
    background-size: contain;
}
.tick-grid li::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(210, 185, 130, 0.3);
    border-radius: 10px;
}
.tick-grid .txt { display: block; text-align: left; padding: 15px 15px 15px 0; }
.tick-grid .txt .br {
    display: block;
    padding-bottom: 0;
}

/* The LXRY Difference */
.diff-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    max-width: 1200px;
    margin: 2em auto 0;
}
.diff-box {
    width: 350px;
    border: 1px solid rgba(210, 185, 130, 0.3);
    border-radius: 10px;
    padding: 2.5em 2em 0.5em;
    text-align: center;
	font-size:calc(1em - 1px);
}
.diff-box h3 {
    margin: 0;
}
@media only screen and (min-width: 769px){
	.diff-box h3 { font-size:30px; }
}
.diff-box .gold-divider {
	padding-top:5%;
	margin:1em auto;
}
.diff-box p {
    line-height: 160%;
    margin: 0.8em 0;
}
.diff-box .btn-row {
    margin-top:1em;
}


/* Our Story */
#OurStory .story-text {
    max-height: 300px;
    overflow: hidden;
    transition: max-height 0.6s ease;
}
#OurStory .story-text::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: linear-gradient(to bottom, transparent, #060405);
    pointer-events: none;
    transition: opacity 0.4s ease;
}
#OurStory .story-text.open::after {
    opacity: 0;
}
#OurStory .story-text p {
    line-height: 170%;
}
#OurStory .story-text p em {
	color:#CACAD9;
}
.story-toggle {
    text-align: center;
}
.story-toggle a {
	display:inline-block;
    color: #F2E6AC;
    font-weight: 400;
    font-size: 14px;
    text-decoration: none;
}
.chevron-gold {
    width: 30px;
    height: 20px;
    margin: 8px auto 0;
    background: linear-gradient(
        to bottom,
        #CD9F49 0%,
        #ECD88E 40%,
        #F8F0BC 60%,
        #ECD88E 80%,
        #CD9F49 100%
    );
    clip-path: polygon(0 0, 50% 100%, 100% 0, 80% 0, 50% 65%, 20% 0);
    transition: transform 0.3s ease;
}
.story-toggle a:hover {
    color: #FFF;
    text-decoration:underline;
}
.story-toggle a:hover .chevron-gold { background:#FFF; }

.story-toggle.open .chevron-gold {
    transform: rotate(180deg);
}

@media only screen and (min-width: 769px) and (max-width: 1550px) {
}

@media only screen and (min-width: 769px) and (max-width: 1350px) {
    #Intro	.sub-hd				{ font-size:1.5em !important; }
	.img-row					{ gap:3em; }
	.img-row.images-3 > .img	{ width:calc(33% - 2em); }
}

@media only screen and (min-width: 769px) and (max-width: 1200px) {
    #Intro	.sub-hd				{ font-size:1.4em !important; }
	.img-row					{ gap:2em; }
	.img-row.images-3 > .img	{ width:calc(33% - 1.5em); }
	
	.tick-grid 					{ gap: 1.8em; }
	.tick-grid li {
		width: 320px;
		gap: 2px;
		padding: 5px;
		border-radius: 10px;
		min-height: 82px;
		font-size: 18px;
	}
	.tick-grid li::before {
		width: 80px;
		height: 80px;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1050px) {
    #Intro	.sub-hd				{ font-size:1.3em !important; }
	.img-row					{ gap:1em; }
	.img-row.images-3 > .img	{ width:calc(33% - 1em); }
	
	.tick-grid 					{ gap: 1.6em; }
	.tick-grid li {
		width: 290px;
		gap: 2px;
		padding: 4px;
		border-radius: 9px;
		min-height: 80px;
		font-size: 16px;
	}
	.tick-grid li::before {
		width: 74px;
		height: 76px;
	}
}
@media only screen and (min-width: 769px) and (max-width: 900px) {
    #Intro	.sub-hd				{ font-size:1.2em !important; }
}
@media only screen and (max-width: 900px) {
	.tick-grid 					{ gap: 1.4em; }
	.tick-grid li {
		width: 250px;
		gap: 1px;
		padding: 3px;
		border-radius: 8px;
		min-height: 74px;
		font-size: 14px;
	}
	.tick-grid li::before {
		width: 70px;
		height: 72px;
	}
}

@media only screen and (max-width: 768px) {
	.img-row					{ gap:1em; margin:2em auto; }
	.img-row.images-3 > .img	{ width:calc(33% - 1em); }
	
	.tick-grid-section 			{ padding-top:1em; }
}

@media only screen and (max-width: 600px) {
	.tick-grid 					{ gap: 1.2em; }
	.tick-grid li {
		width: 230px;
		gap: 1px;
		padding: 2px;
		border-radius: 7px;
		min-height: 70px;
		font-size: 12px;
	}
	.tick-grid li::before {
		width: 66px;
		height: 68px;
	}
}

@media only screen and (max-width: 550px) {
	.img-row					{ gap:1em; margin:1.5em auto; }
}

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

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

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