/* 
	BACKSTAGE | FRANCISSEN - SELECTIVE SALON PARTNERS
	2018 - Cybox Backstage CMS
	www.cybox.nl        
*/

/* reset */  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 	margin: 0; 	padding: 0; 	border: 0; 	outline: 0; 	font-size: 100%; 	vertical-align: baseline; 	background: transparent; } body { 	line-height: 1; } ol, ul { 	list-style: none; } blockquote, q { 	quotes: none; } blockquote:before, blockquote:after, q:before, q:after { 	content: ''; 	content: none; }  /* remember to define focus styles! */ :focus { 	outline: 0; }  /* remember to highlight inserts somehow! */ ins { 	text-decoration: none; } del { 	text-decoration: line-through; }  /* tables still need 'cellspacing="0"' in the markup */ table { 	border-collapse: collapse; 	border-spacing: 0; }
/* clearfix  */   .cf:before, .cf:after {     content: " "; /* 1 */     display: table; /* 2 */ }  .cf:after {     clear: both; }  /**  * For IE 6/7 only  * Include this rule to trigger hasLayout and contain floats.  */ .cf {     *zoom: 1; }


html,
body {
	margin:0;
	padding:0;
	height: 100%;
}
body {
    font-family: 'Work Sans', sans-serif;
    font-size: 1em;
    line-height: 1.7;
    background-color:#0a0a0a;
	color: #fff;
    overflow-x: hidden;
    overflow-y: scroll;
}
div, p, * {
	border: 0px solid #f00;
}

a {
	color: #666;
	text-decoration: none;
}
a:hover {
	color: #999;
}

/* header */
.header {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 130px;
	/*background: #1c1c1c;*/
	color: #fff;
	/*box-shadow: 0px 0px 100px rgba(0,0,0,0.8);*/
	z-index: 9;
}
.header .logo {
	position: absolute;
	left: 50%;
	top: 80%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	text-align: center;
	text-shadow: 0px 0px 20px #000;
}
.header .logo span {
	display: block;
	font-size: 1.88em;
	line-height: 1;
	letter-spacing: 0.02em;
}

/* rows general */
.row {
	padding: 200px 0;
	box-sizing: border-box;
	min-height: 100vh;
	position: relative;
}
.row .container {
	/*max-width: 1100px;*/
	margin: 0 auto;
	width: 85%;
}
.row .container h1,
.row .container h2 {
	font-size: 1.5em;
	font-weight: 500;
	margin-bottom: 40px;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1;
}
.row .container h3 {
	text-transform: uppercase;
	letter-spacing: 0.01em;
	font-weight: 500;
	color: #999;
	margin-bottom: 20px;
}
.row .container p {
	margin-bottom: 30px;
	display: none;
}
.row .container p:first-of-type {
	display: block;
}
.row .container p:last-of-type {
	margin-bottom:40px;
}
.row .container span.fade {
	color: #666;
	font-size: .9em;
	display: block;
}
.row .container .leesmeer,
.row .container .leesminder {
	padding: 11px; 
	padding-bottom: 10px;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	background: #333;
	font-weight: 800;
	display: inline-block;
	cursor: pointer;
}
.row .container .leesminder {
	display: none;
	width: 70px;
}
.row .container .leesmeer:hover,
.row .container .leesminder:hover {
	background: #fff;
	color: #666;
}



/* INTRO */
.row.intro {
	padding-top: 230px;
}
.row.intro .trailer {
	z-index: 3;
}
.row.intro .text {
	float: right; 
	margin-right: 7%;
	margin-top:55vh;
	position: relative;
	z-index:4;
}
.row.intro .text .text-holder-home {
	padding: 3em;
	background: #1c1c1c;
	max-width: 700px;
}
.row.intro .image {
	float: left;
	position: absolute;
    top:0;
    left:0;
    width:100%;
    height:90vh;
    margin-left:0;
    overflow:hidden;
    z-index:3;
}
.row.intro .image .overlay-image {
	position: relative;
    height:105vh;
}
.row.intro .image .overlay {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: #0f0f0f;
}
.row.intro .image img {
    position:absolute;
    top:60%;
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%);
	display: block;
	width: 100%;
}
.row.intro .image .hartje {
	position: absolute;
	right:20%;
	top:50%;
	width: 160px;
}
.row.intro .image .hartje svg {
	display: block;
	width: 100%;
	fill:#000;
    -webkit-transform:scale(1,1);
    transform:scale(1,1);
    transform-origin:center;
    animation-name:heartbeat;
    animation-duration:1.5s;
    animation-iteration-count:infinite;
}

@keyframes heartbeat {
    0%   { transform:scale(1,1); }
    60%  { transform:scale(1,1); }
    70%  { transform:scale(1.25,1.25); }
    80%  { transform:scale(1,1); }
    90%  { transform:scale(1.15,1.15); }
    100% { transform:scale(1,1); }
}


/* MERKEN */
.row.merken {
	background: #111;
}
.row.merken.second {
	background: #222;
}
.row .media {
	width: 102%;
	margin-left: -1%;
	margin-bottom: -100px;
	position: relative;
	z-index: 3;
}
.row .media img {
	width: 31.333%;
	float: left;
	margin: 1%;
	box-shadow: 0px 0px 10px #000;
	opacity: 0;
	transform: translateY(20%);
}
.row .text-holder {
	max-width: 60%;
	float: right;
	padding: 3em;
	margin-right: 5%;
	background: #1c1c1c;
	position: relative;
	z-index: 3;
	box-shadow: 0px 0px 40px rgba(28,28,28,0.3);
	box-sizing: border-box;
}
.row.merken.second .text-holder {
	float: left;
	margin-right: 0%;
	margin-left: 10%;
}


/* TRAILERS (overall */
.trailer {
	width: 2px; 
	height: 0px;
	position: absolute;
	left: 50%;
	margin-left: -1px;
	top: 0;
	background: #333;
	z-index: 1;
}
.row.merken.second .trailer {
	background: #999;
}


/* CONTACT */
.row.contact {
	background: #111111;
	color: #fff;
}
.row.contact .trailer {
	background: #333;
}
.row.contact .container {
	max-width: 70%;
}
.row.contact .hartje {
	width: 55%;
	float: right;
	margin-top: -80px;
	position: relative;
	z-index: 2;
}
.row.contact .hartje svg {
	fill: #121212;
}
.row.contact div a {
	color: #fff;
	text-decoration: none;
}
.row.contact div a:hover {
	color: #ccc;
}
.row.contact div.contact-set {
	width: 363px;
	height: 120px;
}
.row.contact div.contact-set span.name {
	font-size: 1.2em;
	display: block;
}
.row.contact div.contact-set a.icon {
	display: block;
	width: 30px;
	height: 30px;
	margin-left: 0px;
	border-radius: 45px;
	-webkit-transform: translateY(2px);
	transform: translateY(2px);
	float: right;
}
.row.contact div.contact-set a svg {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 30px;
	height: 30px;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	fill: #fff;
}
.row.contact div.contact-set a.whatsapp svg {
	fill: #2cb742;
}
.row.contact div.contact-set a:hover svg {
	width: 23px;
	height: 23px;
}
.row.contact p.digits {
	color: #666;
	padding-top: 40px;
	padding-bottom: 20px;
}
.row.contact p.digits span {
	width: 100px;
	display: inline-block;
	text-transform: uppercase;
	font-size: .8em;
}
.row.contact a.icon {
	margin-top: 5px;
	margin-right: 10px;
    width:44px; height:44px;
    border-radius:9px;
	display: inline-block;
}
.row.contact a.icon svg {
	width: 44px;
	height: 44px;
	fill: #fff;
}
.row.contact a.icon.fb { background-color:#4267b2; }
.row.contact a.icon.ig { background:#d6249f; background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%); }
.row.contact a.icon.ig { background:radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%),
    radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%),
    radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%),
    radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%),
    radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%),
    radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%),
    radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent),
    linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%); }

.row.contact .container p {
	display: block;
}



#page404 {
	text-align: center;
	padding: 250px 0;
}
#page404 h1 {
	font-size: 2em;
}