@charset "utf-8";

/*
---------------------------------------------------------------------------------------------------- 
	Fonts
----------------------------------------------------------------------------------------------------
*/

@import url("https://fonts.googleapis.com/css?family=Montserrat:500,500i,700,700i,800&display=swap");

/*
---------------------------------------------------------------------------------------------------- 
	Root
----------------------------------------------------------------------------------------------------
*/

html {
    font-size: 14px;
}

/*
---------------------------------------------------------------------------------------------------- 
	App defaults
----------------------------------------------------------------------------------------------------
*/

.app {
	left: 0;
	color: #000;
	position: relative;
	transition: left 0.25s;
	font: 500 1rem/1.5 "Montserrat", Helvetica, Arial, sans-serif;
}

.app.toggle {
	left: -280px;	
}

.app h1 { font-size: calc(0.5em * 5.4); line-height: 1.0; }
.app h2 { font-size: calc(0.5em * 3.6); line-height: 1.2; }
.app h3 { font-size: calc(0.5em * 2.8); line-height: 1.4; }
.app h4 { font-size: 1em; }

.app h1, .app h2, .app h3, .app h4 {
	font-weight: 800;
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    letter-spacing: -0.0333em;
}

.app h1 + h2, .app h1 + h3, .app h1 + h4,
.app h2 + h3, .app h2 + h4,
.app h3 + h4 {
	margin-top: 1rem;	
}

.app label {
	margin-bottom: 0.25em;
}

.app b, .app strong {
	font-weight: 700;	
}

.app input, .app textarea, .app select {
	width: 100%;
	color: inherit;
}

.app select {
	cursor: pointer;
	background-size: 1.5em;
	background-repeat: no-repeat;
	background-position: calc(100% - 0.75em) center;
	background-image: url(graphics/icon-select-arrow.svg);
}

.app ::placeholder {
	opacity: 0.5;
    color: inherit;
}

.app img[data-src] {
    visibility: hidden;
}

.app img[src] {
    visibility: visible;   
}

/*
---------------------------------------------------------------------------------------------------- 
	Custom defaults
----------------------------------------------------------------------------------------------------
*/

.container {
    padding-left: 0;
    padding-right: 0;
}

/* Lists */

.list li {
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.list-heading {
    margin-bottom: 1rem;   
}

.list-ruled li a {
    padding-top: 0.65em;
    padding-bottom: 0.65em;
}

.list-ruled li + li {
    border-color: rgba(0,0,0,0.1);
}

/* Patterns */

.pattern {
    background-size: 768px;
    background-attachment: fixed;
    transition: background-size 5s, background-position 20s;
}

.pattern-1 {
    background-position: 0 0;
    background-image: url(graphics/pattern-1.svg);   
}

.pattern-1.scroll {
    background-position: 100vw 0;   
}

.pattern-2 {
    background-position: 100vw 0;
    background-image: url(graphics/pattern-2.svg);   
}

.pattern-2.scroll {
    background-position: 0 0;   
}

.pattern-3 {
    background-position: 0 100vh;
    background-image: url(graphics/pattern-3.svg);   
}

.pattern-3.scroll {
    background-position: 0 0;   
}

.pattern-4 {
    position: relative;
    background-size: auto 50vmin;
}

.pattern-4.scroll {
    background-size: auto 100vmin;
}

.pattern-4:before {
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    display: block;
    position: absolute;
    background-size: inherit;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(graphics/pattern-4.svg);
    animation: pattern-rotate 20s linear infinite;
}

@keyframes pattern-rotate {
    to {
        transform: rotate(360deg);
    }
}

/*
---------------------------------------------------------------------------------------------------- 
	Links / Buttons / Icons / Socicons
----------------------------------------------------------------------------------------------------
*/

.app-link, .app-button, .app-icon {
}

.app-link {
    padding: 0;
    border: none;
    display: inline-block;
    background-color: transparent;
}

.app-link:hover {
    text-decoration: underline;
}

/* Buttons */

.app-button {
	border: none;
	line-height: 1;
    font-weight: 700;
    border-radius: 4px;
	padding: 0.75em 2em;
	display: inline-block;
    transition: color 0.25s, background-color 0.25s;	
}

.app-button:hover {
	text-decoration: none;
}

/* Icons */

.app-icons {
	display: flex;
}

.app-icon {
	padding: 0;
    border: none;
    display: flex;
    color: inherit;
	position: relative;
    align-items: center;
    transition: color 0.25s;
	background-color: transparent;
}

.app-icon:after {
	content: " ";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	position: absolute;
}

.app-icon svg {
	display: block;
}

.app-icon-text {
    font-size: 12px;
    font-weight: 700;
    margin-right: 0.5em;
    text-transform: uppercase;
}

/* Social Icons */

.app-socicons {
    align-items: center;
    display: inline-flex;
}

.app-socicons .app-socicon {
    margin-left: 1em;
}

.app-socicon {
    width: 1rem;
	height: 1rem;
	display: inline-block;
    background-size: 1rem;
    background-position: center;
    background-repeat: no-repeat;
}

.app-socicon.facebook  { background-image: url(graphics/socicon-facebook.svg); }
.app-socicon.twitter   { background-image: url(graphics/socicon-twitter.svg); }
.app-socicon.linkedin  { background-image: url(graphics/socicon-linkedin.svg); }
.app-socicon.instagram { background-image: url(graphics/socicon-instagram.svg); }

/* Meta */

.app-meta {
    font-size: 1rem;
    margin-bottom: 0;
    border-radius: 2px;
    display: inline-flex;
    padding: 0.25em 0.75em;
}

/*
---------------------------------------------------------------------------------------------------- 
	Dialog
----------------------------------------------------------------------------------------------------
*/

.app dialog {
	display: none;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 15px;
	position: fixed;
	align-items: center;
	justify-content: center;
	background-color: rgba(0,0,0,0.0);
	color: #ffffff;
	border: none;
	z-index: 3;
}

.app dialog .dialog-content {
	padding: 1.5em;
	pointer-events: none;
	border-style: solid;
	border-width: 4px;
}

.app dialog .dialog-content:before {
	content: "X";
	float: right;
	cursor: pointer;
	padding-left: 15px;
}

.app dialog.error:not(.hidden) {
	display: flex;
}

.app dialog.error .dialog-content {
	border-color: rgba(240,0,32,1);
	background-color: rgba(240,0,32,0.75);
}

.app dialog.success:not(.hidden) {
	display: flex;
}

.app dialog.success .dialog-content {
	border-color: rgba(0,240,32,1);
	background-color: rgba(0,240,32,0.75);
}

/*
---------------------------------------------------------------------------------------------------- 
	Header
----------------------------------------------------------------------------------------------------
*/

.app-header {
	z-index: 1;
	position: relative;
}

/* Logo */

.app-logo {
	display: block;	
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
}

.app-logo-image {
    height: 20px;	
    display: block;
}

/* Nav bar */

.app-navbar {
	top: 0;
	z-index: 1;
    height: 50px;
	position: relative;
	transition: top 0.25s;
}

/* Nav */

.app-nav {
	top: 0;
	right: 0;
	z-index: 0;
	width: 280px;
	height: 100vh;
    display: flex;
	position: fixed;
	padding: 0 30px 0;
    align-items: stretch;
    flex-direction: column;
    justify-content: space-between;
}

.app-nav-emblem {
	display: block;
	max-width: 100px;
	margin: 6vh auto 6vh;
}

.app-nav-footer {
    margin-bottom: 6vh;
}

/* Menu */

.app-menu {
	margin: 0;
	padding: 0;
	font-weight: 500;
	list-style-type: none;
}

.app-menu a {
	display: block;
}

.app-menu-row {
	display: none;
}

.app-menu-row a {
	padding-top: 0.75em;
	padding-bottom: 0.75em;	
}

.app-menu-row span {
	display: block;	
}

.app-menu-row li {
	float: left;
	display: flex;
	align-items: center;	
}

.app-menu-row li + li {
	margin-left: 1.75vw;
}

.app-menu-col {
    margin-top: 0;
    margin-bottom: auto;    
}

.app-menu-col a {
	padding-top: 0.5em;
	padding-bottom: 0.5em;	
}

.app-menu-col li + li {
	border-top: solid 1px rgba(255,255,255,0.2);
}

/*
---------------------------------------------------------------------------------------------------- 
	Main
----------------------------------------------------------------------------------------------------
*/

.app-main {
	z-index: 1;
	position: relative;
	background-color: #fff;
    box-shadow: inset 0px 4px 4px -4px rgba(0,0,0,0.1);
}

.app-main img {
    display: block;   
}

/* Banner */

.app-banner {
    display: flex;
    position: relative;
    align-items: stretch;
}

.app-banner-1 {
    height: 540px;   
}

.app-banner .row {
    flex-grow: 1;
    flex-basis: 0;
    position: relative;
}

.app-banner .content img {
    display: block;   
}

/* Cards */

.app-card {
    flex-grow: 1;
    flex-basis: 0;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 2rem;
}

.app-card-image {
    padding-top: 0;
    padding-bottom: 0;
}

.app-card-image img {
    max-height: 200px;
    margin-left: auto;
    margin-right: auto;
}

.app-card-content {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.app-card-content h3, 
.app-card-content h4 {
    font-weight: 700;   
}

.app-card-content h3 {
    font-size: calc(1rem + 2px);   
}

/* Panels */

.app-panel {
    padding: 0;
    display: flex;
    overflow: hidden;
    border-radius: 8px;
    text-align: center;
    flex-direction: column;
}

.app-panel:nth-child(2) {
    z-index: 1;
    box-shadow: 0px 0px 2rem 0px rgba(0,0,0,0.1);
}

.app-panel-header {
    height: 4rem;
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}

.app-panel-header h3 {
    line-height: 1;
    font-weight: 700;
}

.app-panel:nth-child(1) .app-panel-header {
    border-radius: 8px 0 0 0;
}

.app-panel:nth-child(3) .app-panel-header {
    border-radius: 0 8px 0 0;
}

.app-panel-content {
    flex-grow: 1;
    flex-basis: 0;
    padding: 2.5rem 2rem;
}

.app-panel-cost {
    font-weight: 800;
    line-height: 1.0; 
    margin-bottom: 2.5rem;
    font-size: calc(0.5em * 5.4); 
}

.app-panel-footer {
    overflow: hidden;
    padding-bottom: 2.5rem;   
}

.app-panel:nth-child(1) .app-panel-footer {
    border-radius: 0 0 0 8px;
}

.app-panel:nth-child(3) .app-panel-footer {
    border-radius: 0 0 8px 0;
}

.app-panel ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.app-panel li {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.app-panel li:first-child {
    padding-top: 0;
}

.app-panel li:last-child {
    padding-bottom: 0;
}

.app-panel li + li {
    border-top: solid 1px;
}

.app-panel .app-button {
    padding-left: 3em;
    padding-right: 3em;
}

.app-panel .app-link {
    margin-top: 0.5rem;   
}

/* Details */

.app-details ul {
    margin: 0;
    padding: 0;
    display: block;
    list-style-type: none;
}

.app-details li ul {
    height: auto;
    overflow: hidden;
}

.app-details > ul > li + li {
    margin-top: 2px;
}

.app-details li li {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.app-details li li:first-child {
    padding-top: 1rem;   
}

.app-details li li:last-child {
    padding-bottom: 1rem;   
}

.app-details h3 {
    cursor: pointer;
    font-weight: 700;
    position: relative;
    padding: 0.75rem 1.5rem;
    font-size: calc(1em + 2px);
    transition: background-color 0.25s;
}

.app-details h3:after {
    content: "\00a0";
    top: 0;
    right: 0;
    width: 1.5em;
    display: block;
    padding: 0.75rem;
    position: absolute;
    background-size: 1rem;
    transform: rotate(180deg);
    background: url(graphics/icon-expand.svg) no-repeat center;
}

.app-details li.collapsed ul {
    height: 0;
}

.app-details li.collapsed h3:after {
    transform: rotate(0);
}

/* Posfix and Lookbook */

.app-posfix {
    min-height: 100vh;
    position: absolute;
}

.app-lookbook {
    display: flex;
    position: relative;
}

.app-lookbook-aside {
    flex-grow: 1;
    flex-basis: 0;
    padding-left: 15%;
    padding-right: 15%;
}

.app-lookbook-aside:nth-child(2) {
    flex-grow: 10;
}

.app-lookbook-content {
    padding-top: 0;
    padding-bottom: 0;
}

.app-lookbook-content p {
    margin: 0;
}

/* Articles */

.app-article-meta {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.app-article-tags {
    font-style: italic;    
}

/* Brands */

.app-brand {
    position: relative;
}

.app-brand:before {
    content: "";
    top: 1rem;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    display: block;
    position: absolute;
    box-shadow: inset 0px 0px 0px 2px rgba(0,0,0,0.05);   
}

.app-brand img {
    padding-left: 2rem;
    padding-right: 2rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Pagination */

.app-pagination {
	display: flex;
	justify-content: space-between;
}

.app-pagination a,
.app-pagination span {
	display: flex;
	width: 2.65em;
	height: 2.65em;
	align-items: center;
	justify-content: center;
	transition: color 0.25s, background-color 0.25s;
}

.app-pagination a:hover {
	text-decoration: none;
}

.app-pagination-nums {
	display: flex;	
}

.app-pagination-nums a + a {
	margin-left: 5px;	
}

/* Form */

.app-form {
	padding-left: 0.5rem;
	padding-right: 0.5rem;	
}

.app-form input, .app-form textarea, .app-form select {
	border: none;
	padding: 0.60em 1em;
}

.app-form .row {
	margin-left: -0.5rem;
	margin-right: -0.5rem;	
}

.app-form [class^="col-"] {
	padding-left: 0.5rem;
	padding-right: 0.5rem;	
}

/*
---------------------------------------------------------------------------------------------------- 
	Footer
----------------------------------------------------------------------------------------------------
*/

.app-footer {
	z-index: 1;
	position: relative;
}

.app-footer .app-logo-image {
    min-height: 30px;
    display: inline-block;
}

/*
---------------------------------------------------------------------------------------------------- 
	App Lightbox
----------------------------------------------------------------------------------------------------
*/

.app-lightbox {
	top: 0; 
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	padding: 15px;
	display: none;
	position: fixed;
	background-color: rgba(0,0,0,0.50);
}

.app-lightbox:after {
	top: 12px;
	right: 12px;
	width: 30px;
	height: 30px;	
	display: block;
	position: absolute;
	background: url(graphics/icon-close.svg) center no-repeat ;
	background-size: 100%;
	cursor: pointer;
	content: " ";
}

.app-lightbox.visible {
	display: flex;
	align-items: center;
	justify-content: center;
}

/*
---------------------------------------------------------------------------------------------------- 
	Media queries
----------------------------------------------------------------------------------------------------
*/

@media (max-width: 511.98px) {
	
	.app-footer {
		text-align: center;	
	}
    
    .app-break {
        display: block;   
    }
}

@media (min-width: 512px) {

	.container {
        padding-left: calc(50% - 240px);
        padding-right: calc(50% - 240px);
	} 
}

@media (max-width: 767.98px) {

    .app-banner-1 .app-banner-image {
        bottom: 0;
        position: absolute;
    }   
    
    .app-banner-2 .app-banner-image {
        display: none;   
    }
    
    .app-banner-image img {
        max-width: 75%;
        margin-left: auto;
    }
    
    .container .app-cards {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
    
    .app-card {
        margin: 0 -0.5rem 1rem;
    }
    
    .app-panel + .app-panel {
        margin-top: 2rem;   
    }
    
    .app-lookbook-aside {
        z-index: 1;
        position: relative;
    }
    
    .app-lookbook-aside:before {
        content: "";
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        display: block;
        position: absolute;
        background-color: rgba(0,0,0,0.333);
    }
    
    .pattern-1, .pattern-2, .pattern-3 {
        background-size: 384px;
    }
}

@media (min-width: 768px) {

	.container {
        padding-left: calc(50% - 360px);
        padding-right: calc(50% - 360px);
	}  
	    
    .app-navbar {
        height: 75px;
    }
	
	.app-navbar .app-icons {
		display: none;	
	}    
    
	.app-logo-image {
		height: 25px;
	}
    
	.app-menu-row {
		display: flex;
		text-align: center;
		align-items: stretch;
	}
    
    .app-banner {
        height: 370px; 
    }

    .app-banner .row {
        display: flex;
    }

    .app-banner-content {
        align-self: center;
    }
    
    .app-banner-image {
        padding: 0;
    }    

    .app-banner-image img {
        bottom: 0;
        position: absolute;
    }    
    
    .app-panel:not(:nth-child(2)) .app-panel-header {
        height: 3rem;
    }    
    
    .app-panel:nth-child(2) .app-panel-footer {
        padding-bottom: 3.5rem;
    }
    
    .app-shadow {
        padding-left: 0;
        padding-right: 0;
    }
    
	.app-lightbox:after {
		top: 20px;
		right: 20px;	
	} 
}

@media (min-width: 1024px) { 

    html {
		font-size: 16px;	
	}	    
    
    .font-xs { font-size: calc(1em - 2px); }
    .font-sm { font-size: calc(1em - 1px); }
    .font-lg { font-size: calc(1em + 1px); }
    .font-xl { font-size: calc(1em + 3px); }        
    
	.container {
        padding-left: calc(50% - 480px);
        padding-right: calc(50% - 480px);
	}
    
    .app-navbar {
        height: 90px;
    }      
    
	.app-logo-image {
		height: 30px;
	}
    
    .app-banner {
        height: 490px;   
    }
    
    /* Offset (not in CMS) */
    
    .app-main [data-posoff] {
        opacity: 0;
        transform: translateY(9vh);
        transition: opacity 1s, transform 1s;
    }
    
    .app-main [data-posoff="0"] {
        opacity: 1;
        transform: translateY(0vh);
    }
}

@media (min-width: 1280px) {

    html {
		font-size: 18px;	
	}	

    .font-xs { font-size: calc(1em - 4px); }
    .font-sm { font-size: calc(1em - 2px); }
    .font-lg { font-size: calc(1em + 2px); }
    .font-xl { font-size: calc(1em + 6px); }    
    
	.container {
        padding-left: calc(50% - 600px);
        padding-right: calc(50% - 600px);
	}
    
    .app-navbar {
        height: 105px;
    }    
			
	.app-logo-image {
		height: 35px;
    }

    .app-banner {
        height: 620px;   
    }
    
    .app-lightbox:after {
		top: 30px;
		right: 30px;	
	}	
}

@media (min-width: 1536px) { 
	
	html {
		font-size: 20px;	
	}	
    
	.container {
        padding-left: calc(50% - 660px);
        padding-right: calc(50% - 660px);
	}
    
    .app-navbar {
        height: 120px;
    }
			
	.app-logo-image {
		height: 50px;
    }
    
    .app-banner {
        height: 680px;   
    }
}