* {
	box-sizing:border-box
}
html, body {
	position:relative;
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	min-height:100vh;
    font-family: "Source Sans Pro";
}
h4 {
    font-size: 24px;
	color:#000000;
}
h1, h2, h3 {
	margin:0;
	padding:0
}
p {
	margin:0;
	padding:0
}
html, body {
	color:rgba(0, 0, 0, .7);
transition:background-color .2s ease-out
}
svg {
	fill:rgba(0, 0, 0, .7)
}
button {
	background:none;
	border:none;
	outline-color:#afdbff;
	cursor:pointer
}
header {
	z-index:1000;
	position:absolute;
	top:0;
	padding:2rem 4rem;
	width:100%;
	pointer-events:none;
	background-color:rgba(255, 255, 255, .2);
	border-bottom:1px solid rgba(0, 0, 0, .1);
	display:-moz-flex;
	display:flex;
	-moz-align-items:center;
	align-items:center
}
@media(max-width: 992px) {
header {
padding:.75rem 2rem
}
}
header .logo-container {
	margin-right:7.5rem;
	height:1.75rem
}
@media(max-width: 992px) {
header .logo-container {
margin-right:0;
height:1rem
}
}
header .logo-container .coniclabs-logo {
	width:auto;
	height:100%
}
header .menu-item {
	width:5rem;
	height:1rem;
	margin:0 1rem;
	border-radius:1rem;
	background-color:rgba(0, 0, 0, .5)
}
@media(max-width: 992px) {
header .menu-item {
display:none
}
}
header .spread {
	-moz-flex:auto 1 1;
	flex:auto 1 1
}
header .menu-container {
	display:-moz-flex;
	display:flex
}
header .cart, header .login {
	width:1.5rem;
	height:1.5rem;
	margin-left:1.75rem
}
@media(max-width: 992px) {
header .cart, header .login {
width:1.15rem;
height:1.15rem;
margin-left:1.15rem
}
}
header .cart>svg, header .login>svg {
	width:100%;
	height:100%
}
header .cart-container {
	position:relative
}
header #cart-badge {
	position:absolute;
	top:-0.575rem;
	right:-0.575rem;
	width:1.15rem;
	height:1.15rem;
	opacity:0;
	transform:scale(2);
transition:opacity .15s ease-out, transform .15s ease-out
}
header #cart-badge.active {
	opacity:1;
	transform:scale(1)
}
header #cart-badge .circle {
	fill:#f84270
}
header #cart-badge .text {
	fill:#fff
}
#config-container {
	position:absolute;
	right:0;
	top:0;
	width:37.5rem;
	height:100%;
	padding:0 10rem 0 2.5rem;
	display:-moz-flex;
	display:flex;
	-moz-flex-direction:column;
	flex-direction:column;
	-moz-justify-content:center;
	justify-content:center
}
@media(max-width: 992px) {
#config-container {
top:20rem;
width:100%;
padding:0 2rem;
display:block
}
}
#config-container .headline {
margin-bottom:.25rem;
	text-transform:uppercase
}
#config-container .sub-headline {
	margin-bottom:1rem
}
#config-container .mini-headline {
margin-bottom:.25rem
}
#config-container .config-row {
	margin:0 0 1rem -0.55rem;
	display:-moz-flex;
	display:flex
}
#config-container .config-row .config-btn, #config-container .config-row .config-btn-02 {
	cursor:pointer;
	width:2.25rem;
	height:2rem;
padding:0 .125rem;
	opacity:.75;
transition:.2s opacity ease-out
}
#config-container .config-row .config-btn:hover, #config-container .config-row .config-btn-02:hover {
	opacity:1
}
#config-container .config-row .config-btn svg, #config-container .config-row .config-btn-02 svg {
	fill:none
}
#config-container .config-row .config-btn svg .red, #config-container .config-row .config-btn-02 svg .red {
	fill:#d15969
}
#config-container .config-row .config-btn svg .green, #config-container .config-row .config-btn-02 svg .green {
	fill:#56ca9d
}
#config-container .config-row .config-btn svg .blue, #config-container .config-row .config-btn-02 svg .blue {
	fill:#298cdd
}
#config-container .config-row .config-btn svg .yellow, #config-container .config-row .config-btn-02 svg .yellow {
	fill:#f8b840
}
#config-container .config-row .config-btn svg .gray, #config-container .config-row .config-btn-02 svg .gray {
	fill:#616161
}
#config-container .config-row .config-btn svg .black, #config-container .config-row .config-btn-02 svg .black {
	fill:#000
}
#config-container .config-row .config-btn svg .purple, #config-container .config-row .config-btn-02 svg .purple {
	fill:#6f00ff
}
#config-container .config-row .config-btn svg .chrome, #config-container .config-row .config-btn-02 svg .chrome {
	fill:#e7e7e7
}
#config-container .config-row .config-btn svg .dark-metal, #config-container .config-row .config-btn-02 svg .dark-metal {
	fill:#020202
}
#config-container .config-row .config-btn.active, #config-container .config-row .config-btn-02.active {
	opacity:1
}
#config-container .config-row .config-btn.active svg .frame, #config-container .config-row .config-btn-02.active svg .frame {
	stroke:#000;
	stroke-width:1rem
}
#config-container .description {
	background-color:rgba(0, 0, 0, .15);
	width:100%;
	border-radius:1rem;
	padding:1rem
}
#config-container .description .desc-lines {
	background-color:rgba(0, 0, 0, .25);
	height:1.5rem;
	margin-bottom:1rem;
	border-radius:1rem
}
#config-container .description .desc-lines.line-01 {
	width:85%
}
#config-container .description .desc-lines.line-02 {
	width:55%
}
#config-container .description .desc-lines.line-03 {
	width:27%
}
#config-container .description .desc-lines.line-04 {
	width:43%
}
#config-container .description .desc-lines.line-05 {
	width:22%
}
#config-container .extra-description {
	height:1.5rem;
	width:40%;
	margin-top:1rem;
	border-radius:1rem
}
#config-container .extra-description-02 {
	height:1.5rem;
	width:75%;
	margin-top:1rem;
	background-color:rgba(0, 0, 0, .15);
	border-radius:1rem
}
#config-container .price-tag {
	padding-top:1.25rem;
	font-size:2rem;
}
#config-container .price-info {
}
#config-container .row {
	margin:1rem 0 0 0;
	height:1.5rem;
	display:-moz-flex;
	display:flex
}
#config-container .row .star {
	width:1.2rem;
	height:auto;
margin-right:.3rem;
margin:0 .3rem 0 0
}
#config-container .row .star .second {
	opacity:.5
}
#config-container .buy-btn {
	height:3.5rem;
	width:100%;
	margin-top:1rem;
border-radius:.5rem;
	border:1px solid rgba(0, 0, 0, .5);
	background:none;
	color:rgba(0, 0, 0, .75);
	font-size:1rem;
	font-weight:700;
	text-transform:uppercase
}
#config-container .buy-btn:hover {
	border-color:rgba(0, 0, 0, 0);
	background:rgba(0, 0, 0, .5);
	color:#fff
}
#viewport {
	position:relative;
	width:100%;
	height:100%;
	padding-right:37.5rem;
	transition:background 2s ease-out
}
@media(max-width: 992px) {
#viewport {
max-height:20rem;
padding:2rem 0 0 0
}
}
#viewport .chevron {
	pointer-events:all;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	cursor:pointer;
	height:3rem;
	width:auto;
	opacity:.75;
transition:.2s opacity ease-out;
	padding:4rem 2rem;
	box-sizing:content-box
}
#viewport .chevron:hover {
	opacity:1
}
#viewport .chevron.right {
	right:calc(2rem + 37.5rem)
}
@media(max-width: 992px) {
#viewport .chevron.right {
right:0
}
}
#viewport .chevron.left {
	left:2rem
}
@media(max-width: 992px) {
#viewport .chevron.left {
left:0
}
}
#viewport .chevron svg {
	height:100%;
	width:auto
}
@media(max-width: 992px) {
#viewport .chevron svg {
height:50%
}
}
#viewport .indicator-row {
	pointer-events:none;
	position:absolute;
	bottom:5rem;
	width:100%;
	padding-right:37.5rem;
	display:-moz-flex;
	display:flex;
	-moz-align-items:center;
	align-items:center;
	-moz-justify-content:center;
	justify-content:center
}
@media(max-width: 992px) {
#viewport .indicator-row {
padding:0;
bottom:.25rem
}
}
#viewport .indicator-row .thumb-element {
	pointer-events:all;
	cursor:pointer;
	width:7rem;
	height:calc(7rem / 1.618);
margin:0 .7rem;
border-radius:.5rem;
	background-color:#e0aab7;
	background-color:rgba(255, 255, 255, .1);
transition:.2s opacity ease-out;
	background-position:center;
	background-size:70%;
	background-repeat:no-repeat;
	box-shadow:0px 2px 10px 0px rgba(0, 0, 0, .15);
	-webkit-box-shadow:0px 2px 10px 0px rgba(0, 0, 0, .15)
}
@media(max-width: 992px) {
#viewport .indicator-row .thumb-element {
z-index:1000;
width:2.5rem;
height:calc(2.5rem / 1.618);
margin:0 .5rem;
border-radius:.25rem;
box-shadow:0px 2px 5px 0px rgba(0, 0, 0, .15);
-webkit-box-shadow:0px 2px 5px 0px rgba(0, 0, 0, .15)
}
}
#viewport .indicator-row .thumb-element:hover, #viewport .indicator-row .thumb-element.active {
	background-color:rgba(255, 255, 255, .25)
}
#viewport .indicator-row .thumb-element.active {
	border:1px solid rgba(0, 0, 0, .25)
}
.fabric-gray {
	background-color:#d6d6d6
}
.fabric-gray #viewport {
	background:radial-gradient(closest-side, #f0f0f0 0%, rgba(214, 214, 214, 0) 100%)
}
.fabric-blue {
	background-color:#97bddc
}
.fabric-blue #viewport {
	background:radial-gradient(closest-side, #bdd5e9 0%, rgba(151, 189, 220, 0) 100%)
}
.fabric-green {
	background-color:#b2cac5
}
.fabric-green #viewport {
	background:radial-gradient(closest-side, #d0dfdc 0%, rgba(178, 202, 197, 0) 100%)
}
.fabric-red {
	background-color:#e0aab7
}
.fabric-red #viewport {
	background:radial-gradient(closest-side, #eecfd7 0%, rgba(224, 170, 183, 0) 100%)
}
.fabric-yellow {
	background-color:#ffeecf
}
.fabric-yellow #viewport {
	background:radial-gradient(closest-side, #fff7e9 0%, rgba(255, 238, 207, 0) 100%)
}
.fabric-dark {
	color:#f3f3f3;
	background-color:#171718
}
.fabric-dark #viewport {
	background:radial-gradient(closest-side, #303032 0%, rgba(23, 23, 24, 0) 100%)
}
.fabric-dark svg:not(.config-circle) {
fill:#f3f3f3 !important
}
.fabric-dark .active .config-circle .frame {
	stroke:rgba(243, 243, 243, .5) !important
}
.fabric-dark .description, .fabric-dark .extra-description, .fabric-dark .extra-description-02 {
	background-color:rgba(243, 243, 243, .1) !important
}
.fabric-dark .description .desc-lines, .fabric-dark .extra-description .desc-lines, .fabric-dark .extra-description-02 .desc-lines {
	background-color:rgba(243, 243, 243, .1) !important
}/*# sourceMappingURL=styles.min.css.map */