button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}

@font-face {
  		font-family: "NeueHaasUnica-Regular";
  		src: url('../fonts/NeueHaasUnica-Regular.woff2') format('woff2'), url('../fonts/NeueHaasUnica-Regular.woff') format('woff');
}

:root {
  --main-color: #cd171e;
}

* {
	box-sizing: border-box;
}

em {
	font-style: italic;
}

body {
	padding: 3em;
	font-family: "NeueHaasUnica-Regular";
	font-size: 14px;
	color: var(--main-color);
	text-transform: lowercase;
}

img {
	width: 100%;
}

a {
	text-decoration: none;
	color: var(--main-color);
}

a:visited {
	color: color: var(--main-color);
}

a:hover {
	color: black;
}


/* ---- ENTER ---- */

.enter {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-column-gap: 1rem;
	grid-auto-flow: column;
	place-content: center;
	height: 100%;
	max-width: 1200px;
	margin: auto;
}

.center {
	grid-column-start: 5;
	grid-column-end: span 4;
	border: 1px solid #cd171e;
	padding: 2px;
}

.center-logo {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-column-gap: 1rem;
	padding: 24px 0;
}

.svg-logo {
	grid-column-start: 2;
	grid-column-end: span 2;
	fill: var(--main-color);
	width: 100%;
}

.center:hover {
	border: 1px solid black;
}

.center:hover .svg-logo {
	fill: black;
}


/* ---- HEADER---- */

header {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-column-gap: 1rem;
	grid-auto-flow: column;
	line-height: 20px;
}

header a {
	text-decoration: none;
	color: var(--main-color);
}

header a:visited {
	color: var(--main-color);
}

header a:hover {
	color: black;
}

.logo {
	grid-column-start: 1;
	grid-column-end: span 2;
	height: 42px;
}

.menu {
	grid-column-start: 5;
	grid-column-end: span 3;
}

.dosage {
	height: 42px;
	position: absolute;
	right: 3em;
	top: 3em;
	cursor: pointer;
}

.logo img, .dosage svg {
	height: 100%;
	width: auto;
}

.dosage:hover svg {
	fill: var(--main-color);
}



/* ---- MAIN ---- */

.pr {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-column-gap: 1rem;
	padding: 6em 0;
	grid-auto-flow: dense;
}





/* ---- GRID ---- */

.col-0 {
	grid-column-start: 1;
}

.col-1 {
	grid-column-start: 2;
}

.col-2 {
	grid-column-start: 3;
}

.col-3 {
	grid-column-start: 4;
}

.col-4 {
	grid-column-start: 5;
}

.col-5 {
	grid-column-start: 6;
}

.col-6 {
	grid-column-start: 7;
}

.col-7 {
	grid-column-start: 8;
}

.col-8 {
	grid-column-start: 9;
}

.col-9 {
	grid-column-start: 10;
}

.col-10 {
	grid-column-start: 11;
}

.tiny {
	grid-column-end: span 2;
}

.small {
	grid-column-end: span 3;
}

.medium {
	grid-column-end: span 4;
}

.large {
	grid-column-end: span 5;
}



/* ---- IMAGE ---- */


.image {
	align-self: center;
}

.image img {
	border: 1px solid white;
	padding: 4px;
	display: block;
	box-sizing: content-box;
	margin-left: -4px;
}

.image img:hover {
	border: 1px solid var(--main-color);
}

.image img:active {
	border: 1px solid black;
}



/* ----- CAPTIONS ---- */


.side {
	grid-column-end: span 2;
	align-self: end;
	margin-bottom: -2px;
	line-height: 20px;
}

.description {
	grid-column-start: 6;
	grid-column-end: span 4;
	line-height: 20px;
}

.caption {
	line-height: 20px;
}

.cgara {
	font-size: 1.2em;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 600;
}

.caption {
	margin-top: -2px;
}



/* ----- MAGNIFIC POPUP ---- */

.mfp-container {
	background: var(--main-color);
	padding: 0;
	position: fixed;
}

.mfp-figure:after {
	box-shadow: none;
	background: none;
}

.mfp-arrow {
	margin-top: 0;
	top: 0;
	height: 100%;
	width: 50%;
	position: fixed;
}

.mfp-arrow:before,.mfp-arrow:after {
	display: none;
}

.mfp-close {
	z-index: 9999;
}

.freeze {
	overflow-y: hidden;
	touch-action: none;
}


/* ---- PROJECTS DETAIL PAGE ---- */

.projects-slider {
	width: 100%;
	position: fixed;
	top: 3em;
	left: 0;
}

.paging-info {
	left: 399px;
}

.detail-description {
	display: grid;
	width: calc(100% - 6rem);
	grid-template-columns: repeat(12, 1fr);
	grid-column-gap: 1rem;
	position: fixed;
	bottom: 2rem;
	margin-bottom: -4px;
	align-items: end;
}

.detail-text {
	grid-column-end: span 3;
}

.detail-text .cgara {
	line-height: 16px;
}

.back-button {
	width: calc(100% - 6rem);
	position:fixed;
	display: grid;
	place-items: center;
	bottom: 2rem;
	pointer-events:none;
}

.back-button svg {
	width: 24px;
	align-self: end;
	fill: var(--main-color);
	pointer-events: auto;
}

.back-button:hover svg {
	fill: black;
}

.paging-info {
	grid-column-start: 10;
	grid-column-end: span 2;
}

video {
	height: 100%;
	max-width: calc(100vw - 2rem);
}

.slick-slide img {
	opacity: 1!important;
}

/* ---- BEAUTY AND LIFESTYLE PAGE ---- */

.bl-page {
  display: grid;
  grid-column-gap: 1rem;
  grid-template-columns: repeat(12, 1fr);
}

.bl-section {
  margin-bottom: 1rem;
  grid-column-start: 2;
	grid-column-end: span 10;
}

.bl-description {
  text-align: center;
  padding-bottom: 1rem;
}

.bl-gallery {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.bl-img {
  padding-right: 1rem;
  padding-bottom: 1rem;
  display: inline-block;
}

.bl-small {
  width: calc((100% / 12) * 3 + (3 * 1rem) - .5rem);
}

.bl-large {
  width: calc((100% / 12) * 4 + (4 * 1rem) - .5rem);
}

.bl-back-button {
  position: absolute;
  top: 3rem;
  left: 3rem;
  width: 32px;
}

.bl-back-button .bl-cls-1{fill:#cd171e;}
.bl-back-button:hover .bl-cls-1{fill:black;}

/* ----- BOTTOM ARROW ---- */


.scroll-top {
	position: fixed;
	bottom: 3em;
	right: 3em;
	width: 32px;
	cursor: pointer;
	display: none;
}

.scroll-top:hover {
	fill: var(--main-color);
}



/* ----- FOOTER ---- */

footer {
	padding-top: 3em;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-column-gap: 1em;
}

footer div {
	grid-column-start: 4;
	grid-column-end: span 4;
	color: black;
}


/* ----- INFO ---- */

.info-wrap {
	padding-top: 6em;
	line-height: 20px;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-column-gap: 1em;
	min-height: calc(100vh - 9em - 24px);
}

.contact {
	grid-column-start: 2;
	grid-column-end: span 2;
}

.intro {
	grid-column-start: 5;
	grid-column-end: span 5;
/*	text-align: justify;
  	text-justify: newspaper;
  	hyphens: auto;*/
}

p {
	padding-top: 0;
	padding-bottom: 2em;
	margin: 0;
}

.colophon {
	grid-column-start: 5;
	grid-column-end: span 4;
	padding-top: 6em;
	color: black;
	align-self: end;
}

.intro em {
	font-size: 1.2em;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 600;
}

.colophon a {
	color: black;
}

.colophon a:hover {
	color: var(--main-color);
}


/* ----- MEDIA QUERIES ---- */



@media only screen and (max-width: 750px) {
    body {
    	padding: 2em;
    }

    .col-0 {
		grid-column-start: 1;
	}

	.col-1 {
		grid-column-start: 1;
	}

	.col-2 {
		grid-column-start: 2;
	}

	.col-3 {
		grid-column-start: 4;
	}

	.col-4 {
		grid-column-start: 2;
	}

    .col-5 {
		grid-column-start: 3;
	}

	.col-6 {
		grid-column-start: 3;
	}

	.col-7 {
		grid-column-start: 6;
	}

	.tiny {
		grid-column-end: span 8;
	}

	.small {
		grid-column-end: span 8;
	}

	.medium {
		grid-column-end: span 10;
	}

	.large {
		grid-column-end: span 12;
	}

	.center {
		grid-column-start: 3;
		grid-column-end: span 8;
	}

	header {
		grid-column-gap: 0.5rem;
	}

    .logo {
		grid-column-start: 1;
		grid-column-end: span 7;
	}

	.menu {
		grid-column-start: 3;
		grid-column-end: span 5;
		padding-top: 2em;
	}

	/*.dosage, .logo {
		height: 26px;
	}*/

	.dosage {
		top: 2em;
		right: 2em;
	}

	.pr {
		grid-auto-flow: initial;
		padding: 4rem 0;
		grid-column-gap: 0.5rem;
	}

	.side {
		padding-top: 3rem;
		grid-column-start: 1;
		grid-column-end: span 12;
	}

	.caption {
		grid-column-start: 1;
		grid-column-end: span 4;
	}

	.description {
		grid-column-start: 5;
		grid-column-end: span 8;
	}

	.image:nth-child(2) {
	  padding-top: 8rem;
	  grid-column-start: 6;
	}

    .back-button, .detail-description {
    	width: calc(100% - 4rem);
    }

    .back-button {
    	bottom: auto;
    	top: 1rem;
    	z-index: 2;
    }

    .detail-description {
    	bottom: 1rem;
    }

    .detail-text {
    	grid-column-end: span 9;
    }

    .scroll-top {
		bottom: 2em;
		right: 2em;
		width: 24px;
	}

    footer div {
		grid-column-start: 2;
		grid-column-end: span 8;
	}

	.contact {
		grid-column-start: 2;
		grid-column-end: span 7;
	}

	.intro {
		padding-top: 6em;
		grid-column-start: 3;
		grid-column-end: span 10;
	}

	.colophon {
		grid-column-start: 2;
		grid-column-end: span 9;
	}

	video {
	width: 100%;
	padding: 1em;
	max-width: 100%;
}

  .bl-page {
    grid-column-gap: .5rem;
  }

  .bl-section {
    grid-column-start: 1;
    grid-column-end: 13;
  }

  .bl-back-button {
    top: 2rem;
    left: 2rem;
    width: 28px;
  }

  .bl-gallery {
    padding-left: calc(100% / 12)
  }

  .bl-img {
    padding-right: .5rem;
    padding-bottom: .5rem;
  }

  .bl-small {
    width: calc(((100% / 12) * 5) + (4 * .5rem) - 1rem);
  }

  .bl-large {
    width: calc(((100% / 12) * 6) + (5 * .5rem) - 2rem);
  }

}

@media only screen and (min-width: 1500px) {
	.logo, .dosage {
		grid-column-start: 1;
		grid-column-end: span 4;
		height: 56px;
	}
}