/*===
#TiViTiVi by Corporo Malala
Coryrights 2026 Into Binary. All rights reserved.
Coded for https://tivitivi.corporomalala.online.
===*/


/*=== LIBRARIES ===*/
/*=== END LIBRARIES ===*/

/*=== CUSTOM ===*/
			*{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-family:inherit;vertical-align:baseline;font-size:1em;font-style:normal;-webkit-font-smoothing:antialiased;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;/*user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;*/tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent;-moz-tap-highlight-color:transparent;-o-tap-highlight-color:transparent;}*, *::before, *::after{-webkit-transition:.5s;-box-transition:.5s;-o-transition:.5s;transition:.5s;}:hover,:active,:focus{outline:0 !important;}html, body{min-height:100%;font-family:sans-serif;font-size:1rem;position:relative;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;padding:0;line-height:1;}article, footer, header, section{display:block;}ol, ul{list-style:none;}a{display:inline-block;text-decoration:none;background-color:transparent;color:initial;}a img{border:none;}a, button, input[type="submit"]{cursor:pointer !important;}button{// background-color:transparent;}img{width:100%;max-width:100%;height:auto;}img::selection{fill:none;color:none;display:none;background:none;}video{max-width:100%;}input[type="text"], input[type="number"], input[type="search"], input[type="email"], textarea{text-align:left;max-width:100%;}input[type="checkbox"], input[type="radio"]{display:none;}input[type="submit"]{background-color:transparent;}label{display:inline;}textarea{resize:vertical;}
		table { border-spacing: 0; }

	/*** CANCEL ***/
html, body { width: 100%; height: 100%; }
/*** END CANCEL ***/

/**** Z-INDEXES ***/
.tv, .shop { position: relative; }
a, label,
video { position: relative; }
/**** Z-INDEXES ***/

/*** COLORS ***/
.u-brandCTA { background-color: #DA301E; }

label.u-brandCTA {// background-color: black; }

.u-brandCTA { color: white; }
/*** END COLORS ***/

/*** FONTS ***/
@font-face { font-family: "CrackMan"; src: url("/assets/fonts/crackman.ttf"); }
@font-face { font-family: "CrackMan Front"; src: url("/assets/fonts/crackman front.ttf"); }
@font-face { font-family: "Impact"; src: url("/assets/fonts/impact.ttf"); }

* { font-family: "Impact"; word-spacing: .15em; }
.d-brandFont, .d-brandFont * { font-family: "CrackMan Front"; }

	 { letter-spacing: .1em; line-height: 1.15em; word-spacing: initial !important; }

.shop { text-align: center; }
.header nav div { text-align: right; }
a.u-brandCTA,
label.u-brandCTA { text-decoration: underline; }
/*** END FONTS ***/

/*** MEDIA ***/
* { background-size: cover; background-position: center; }

.shop figure span { background-image: url("/assets/images/theorangedress.gif"); }
.shop figure span { background-position: center -3em; }
/*** END MEDIA ***/

/*** UTILITIES ***/
	/*** .u-brandCTA ***/
	.u-brandCTA {
		padding: 0 .5em;
		border-radius: 1.8em;
	}
		a.u-brandCTA,
		label.u-brandCTA {
			padding: .25em .75em;
			margin: .25em;
		}
	
	/*** .u-btnLANG ***/
		@keyframes twinkle {
			from { transform: scale(1.18); }
			to { transform: scale(1); }
		}
/*** END UTILITIES ***/

/*** COMPONENTS ***/
	/*** COMMONS ***/
	main { display: flex !important; }
	main { flex-direction: column; }
	.header { flex: 1; }

	.tv-ads img,
	video,
	.shop img, .shop figure span { border-radius: 7.5px; overflow: hidden; }
	
	.tv-ads img,
	.shop div img {
		width: auto; height: 18vh; height: 10em;
	}
	
	/*** .header ***/
	.header,
	.header nav { display: flex; }
	.header,
	.header p { flex-direction: column; }
	.header nav div,
	.header p { flex: 1; }

	.header nav img {
		width: auto;
	}
	
	/*** .new ***/
	.new { margin-top: 3em; }
	.new video { width: 100%; height: auto; }
	
	/*** .tv ***/
	.tv_dock,
	.tv-videos { display: flex; }
	.tv_dock { align-items: flex-end; }
	
	.tv { overflow-x: auto; }
	.tv-ads {
	}
	.tv-videos figure {
		position: relative;
		margin-right: 1em;
//		background-color: green;
	}
	.tv-videos figure video {
		position: absolute; bottom: 0; left: 0;
	}
	
	/*** .shop ***/
	.shop_dock { display: flex; }
	.shop_dock { flex-direction: column; }
	.shop figure { flex: 1; }
	
	.shop {
		position: fixed; top: 0; left: 0; right: 0;
		width: 100%; height: 100%;
	}
	.shop figure span {
		width: 100%; height: 100%;
	}
/*** END COMPONENTS ***/

/*** INTERACTIVITY ***/
label { cursor: pointer; }
/*** END INTERACTIVITY ***/

/*** MEDIA-QUERIES ***/
@media all and (max-width: 60em) {
	/*** Z-INDEXES ***/
	.tv { z-index: 10; }
	.shop { z-index: 18; }

	/*** FONTS ***/
	html { font-size: 14px; }
	.header p { font-size: 1.8em; }
	
	/*** COMMONS ***/
	main,
	.shop { padding: 1em; }
	.header,
	.new,
	.tv { width: 100%; }
	
	/*** COMPONENTS: .header ***/
	.header nav img { height: 3em; }
		.header p {// margin-left: 1em; }
	
	.header p { padding: 1em 0; }
	
	/*** COMPONENTS: .shop ***/
	.shop_dock { width: 100%; height: 100%; }
	.shop figure { padding: 1em 1em 3em 1em; }
	
	/*** COMPONENTS: .tv ***/
	.tv-videos figure video {
		width: 100%; height: auto;
	}
	
	/*** INTERACTIVITY ***/
	.shop { display: none !important; }
	#chbx4thedress:checked ~ main .shop { display: block !important; z-index: 100; }
	
	/*** VIEWPORT ***/
	.tv { overflow-x: scroll; }
	.tv_dock {// width: 400%; }
	.tv-videos figure { width: 60vw; }
	
	.header nav { align-items: flex-start !important; }
	.header nav div { padding-top: .5em; }
	.header a { display: inline !important; }
	.header p { text-align: center; }
	
	.cta { padding: 2.5em 0 1em 0; }
	
	.shop { background-color: white; }
	
	/*** VIEWPORT ***/
	.shop {// padding-bottom: 5em; }
	.u-btnLANG.u-brandCTA {
		background-color: #AAA;
	}
	.u-btnLANG { display: none !important; }
	
	/*** TOOLS ***/
	.CSSspacer {// flex: 1 !important; }
}
@media all and (min-width: 60em) {
/*** Z-INDEXES ***/
	.shop { z-index: 10; }
	.tv { z-index: 18; }
	a, label,
	video { z-index: 30; }
	
	/*** FONTS ***/
	html { font-size: 18px; }
	.header p { font-size: 3em; }

	.header p { text-align: right; }
	
	/*** COMMONS ***/
	main,
	.shop { padding: 1em .5em .5em .5em; }
	.header,
	.new,
	.tv { width: 70%; }
	
	/*** COMPONENTS: .header ***/
	.header nav img { height: 4em; }
		.header p { margin-left: 0em; }
	
	.header p { padding: .5em 0; }
		
	/*** COMPONENTS: .shop ***/
	.shop figure { padding: .25em 0 3em 3em; }
	
	/*** COMPONENTS: .tv ***/
	.tv-ads { flex: 1; }
	
	/*
	.tv-ads { position: relative; }
	.tv-ads_dock { position: absolute; bottom: 0; left: 0; }
	*/
	
	
	.tv-videos {
//		background-color: green;
	}

	/*** VIEWPORT ***/
	.tv {// padding-bottom: .5em; }
	.tv-videos figure img {// max-height: 10em; }
	
	.shop label { display: none !important; }
	.header nav div > br:nth-child(1),
	.header nav div > br:nth-child(2),
	.header nav div > br:nth-child(3),
	.header nav div > br:nth-child(4),
	.header nav div > br:nth-child(5),
	.jekyllPlaceholderClassname { display: none !important; }
	.header img { padding-left: 1.8em; }
	
	.shop_dock {
		position: relative; left: 70%;
		width: 30%; height: 100%;
	}
	.shop_dock > div { margin-left: 3em; }
	main,
	.shop { padding-right: 1em; }
	.shop { padding-bottom: 1em; }
	
	.cta { display: none !important; }
		
	.u-btnLANG {
		position: absolute; top: 1em; right: 1em;
		animation: twinkle 1s infinite;
	}
}

@media (max-width: 60em) and (max-height: 800px) {
	.header p {// font-size: 1.8em; }
	.tv_dock {// width: 50%; }
}
@media (min-width: 60em) and (min-height: 800px) {
	.tv_dock {// width: 70%; }
}
/*** END MEDIA-QUERIES ***/

/*** TOOLS ***/
	/*** .CSScentered ***/
	.CSScentered {
		display: flex;
		align-items: center; justify-content: center;
	}
	
	/*** .CSSmidwrap ***/
	.CSSmidwrap {
		max-width: 75em;
		display: block; margin: auto;
	}
	
	/*** .CSSnoWrap ***/
	.CSSnoWrap {
		white-space: nowrap;
		word-break: keep-all;
	}
/*** END TOOLS ***/
/*=== END CUSTOM ===*/