/* Fonts */	
	@font-face {
	    font-family: 'hkgrotesk';
	    src: url('../font/hkgrotesk-bold-webfont.woff2') format('woff2'),
	         url('../font/hkgrotesk-bold-webfont.woff') format('woff');
	    font-weight: 700;
	    font-style: normal;
	}
	@font-face {
	    font-family: 'hkgrotesk';
	    src: url('../font/hkgrotesk-italic-webfont.woff2') format('woff2'),
	         url('../font/hkgrotesk-italic-webfont.woff') format('woff');
	    font-weight: 400;
	    font-style: italic;
	}
	@font-face {
	    font-family: 'hkgrotesk';
	    src: url('../font/hkgrotesk-regular-webfont.woff2') format('woff2'),
	         url('../font/hkgrotesk-regular-webfont.woff') format('woff');
	    font-weight: 400;
	    font-style: normal;

	}
	@font-face {
	    font-family: 'hkgrotesk';
	    src: url('../font/hkgrotesk-semibold-webfont.woff2') format('woff2'),
	         url('../font/hkgrotesk-semibold-webfont.woff') format('woff');
	    font-weight: 600;
	    font-style: normal;
	}
	@font-face {
	    font-family: 'hkgrotesk';
	    src: url('../font/hkgrotesk-light-webfont.woff2') format('woff2'),
	         url('../font/hkgrotesk-light-webfont.woff') format('woff');
	    font-weight: 300;
	    font-style: normal;

	}
	@font-face {
	    font-family: 'hkgrotesk';
	    src: url('../font/hkgrotesk-lightitalic-webfont.woff2') format('woff2'),
	         url('../font/hkgrotesk-lightitalic-webfont.woff') format('woff');
	    font-weight: 300;
	    font-style: italic;

	}

/* Basic and reset */
	html,body{ 
		-webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; overflow-x: hidden; padding: 0; margin: 0; 
		color: #000000; font-family: 'hkgrotesk', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.2;
	}
	*, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit; font-family: inherit;}
	body, h1, h2, h3, h4, h5, h6, p, ol, ul { margin: 0; padding: 0; font-weight: inherit; font-size: inherit; }
	ol, ul { list-style: none; }
	img{ display: block; max-width: 100%; height: auto; border:0; outline: 0;}
	a{text-decoration: none; cursor: pointer; color: inherit; -webkit-transition: all .4s; -webkit-transition: all .2s; -o-transition: all .2s; transition: all .2s;}
	.wrap{display: block; margin:0 auto; max-width: 1200px; width: 92%;}

/* Animations */
	@-webkit-keyframes fadeInUp {
	  0% { opacity:0; -webkit-transform: translate3d(0, 5%, 0); transform: translate3d(0, 5%, 0); }
	  100% { opacity:1; -webkit-transform: none; transform: none; }
	}
	@keyframes fadeInUp {
	  0% { opacity:0; -webkit-transform: translate3d(0, 5%, 0); transform: translate3d(0, 5%, 0); }
	  100% { opacity:1; -webkit-transform: none; transform: none; }
	}
	@-webkit-keyframes fadeIn {
	  0% { opacity:0; }
	  100% { opacity:1; }
	}
	@keyframes fadeIn {
	  0% { opacity:0; }
	  100% { opacity:1; }
	}

/* General */
	
	/* Buttons */
		.bt{
			color: #000000; background: #FFFFFF; border: 0; outline: 0;
			font-size: 1rem; font-weight: 600; text-decoration: none;
		    display: inline-block; padding: 1em 2em; cursor: pointer;
			-webkit-box-shadow: 0px 5px 0px #000000;
			        box-shadow: 0px 5px 0px #000000;
			-webkit-transition: all .2s;
			-o-transition: all .2s;
			transition: all .2s;
		}
		.bt:hover{background: #E5E5E5; -webkit-box-shadow: 0px 2px 0px #000000; box-shadow: 0px 2px 0px #000000; -webkit-transform: translateY(3px); transform: translateY(3px);}
		.bt:active{background: #CCCCCC; -webkit-box-shadow: 0px 0px 0px #000000; box-shadow: 0px 0px 0px #000000; -webkit-transform: translateY(5px); transform: translateY(5px);}

		.bt.pink{background: #B70565; color: #FFFFFF;}
		.bt.pink:hover{background: #AD0459;}
		.bt.pink:active{background: #A2034D;}
		.bt svg{display: inline-block; vertical-align: middle; margin-left: .3em;}

		.qk{position: relative; display: inline-block; font-weight: 600; padding: .2em;}
		.qk:before{content: ""; position: absolute; width: 100%; height: 6px; left: 0; top: 100%; -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; border: 1.5px solid; z-index: 2;}
		.qk:after{
			content: ""; position: absolute; width: 100%; height: 5px; left: 0; top: 100%; 
			-webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; background: #F8EB30; -webkit-transform: translateY(4px); -ms-transform: translateY(4px); transform: translateY(4px);
		}
		.qk:hover{-webkit-transform: translateY(3px); transform: translateY(3px);}
		.qk:hover:after{-webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px);}
		.qk:active:before{border-color: #F8EB30;}

		.play:hover svg .control{-webkit-transform: translate(0,0);-ms-transform: translate(0,0);transform: translate(0,0);}
		@media(max-width: 767px){
			.bt{padding: .7em 1em;}
		}

	/* Helpers */
		.tc{text-align: center;}
		.tr{text-align: right;}
		.relative{position: relative;}
		input[type="checkbox"].toggle{display: none;}
		input[type="checkbox"].toggle:checked + *{display: block;}
		@media(max-width: 1000px){
			.m_block{display: block;}
		}
		@media(max-width: 767px){
			.p_block{display: block;}
		}

	/* Margins and Paddings */
		.mb05{margin-bottom: .5em;}
		.mb1{margin-bottom: 1em;}
		.mb2{margin-bottom: 2em;}
		.mr05{margin-right: .5em;}
		.mr1{margin-right: 1em;}

	/* Modal */
		.modal{display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: auto; z-index: 999; -webkit-animation: fadeIn .2s backwards; animation: fadeIn .2s backwards; }
		.modal > div {display: table; width: 100%; height: 100%; }
		.modal > div > div{display: table-cell; vertical-align: middle;}
		.modal > div > div > label{position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.85);}
		.modal > div > div > div{
			position: relative; z-index: 2; display: block; margin: 2rem auto; max-width: 800px; width: 90%; padding: 3rem; 
			background: #f2f0ec; color: #444; max-height: 90%; border-radius: .5rem;
			-webkit-animation: fadeInUp .4s backwards;
			        animation: fadeInUp .4s backwards;
		}
		.modal > div > div > div.player{padding: 0; background: #000000; border-radius: 0;}
		.modal .close{position: absolute; top: 1rem; right: 1rem; width: 3em; height: 3em; left: auto; z-index: 9; cursor: pointer; background: url(../img/x.svg) center no-repeat; background-size: 100%;}
		.modal > div > div > div.player .close{ top: auto; bottom: 105%; right: 0;}

	/* Embed */
		.embed{display: block; position: relative;}
		.embed:before{content: ""; display: block; width: 100%; padding-top: 56.25%;}
		.embed > *{position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;}

/* Type */
	p{line-height: 1.4;}
	.t12{font-size: 0,75em;}
	.t14{font-size: 0.875em;}
	.t16{font-size: 1.0em;}
	.t18{font-size: 1.125em;}
	.t20{font-size: 1.25em;}
	.t22{font-size: 1.375em;}
	.t28{font-size: 1.75em;}
	.t36{font-size: 2.25em;}

	.w300{font-weight: 300;}
	.w400{font-weight: 400;}
	.w600{font-weight: 600;}
	.w700{font-weight: 700;}

	@media(max-width: 1000px){
		.m_t12{font-size: 0,75em;}
		.m_t14{font-size: 0.875em;}
		.m_t16{font-size: 1.0em;}
		.m_t18{font-size: 1.125em;}
		.m_t20{font-size: 1.25em;}
		.m_t22{font-size: 1.375em;}
		.m_t28{font-size: 1.75em;}
		.m_t36{font-size: 2.25em;}
	}

	@media(max-width: 767px){
		.p_t12{font-size: 0,75em;}
		.p_t14{font-size: 0.875em;}
		.p_t16{font-size: 1.0em;}
		.p_t18{font-size: 1.125em;}
		.p_t20{font-size: 1.25em;}
		.p_t22{font-size: 1.375em;}
		.p_t28{font-size: 1.75em;}
		.p_t36{font-size: 2.25em;}
	}

/* Menu */
	#menu {top: 0; left: 0; width: 100%; position: absolute; z-index: 9; text-align: right; padding: .5em 0;}
	#menu #logo{display: block; width: 112px; float: left; background: url(../img/logo.svg) no-repeat ;}
	#menu #logo:before{content: ""; display: block; width: 100%; padding-top: 41%;}
	#menu #logo h1{text-indent: -99999px; position: absolute; opacity: 0;}
	#menu #openMenu{display: none;}
	#menu #checkMenu{display: none;}
	#menu nav{color: white; display: inline-block; vertical-align: middle; margin-right: 1em;}
	#menu nav ul li{display: inline-block; margin: .5em 1em;}
	#menu nav ul li a{font-weight: 600; color: #FFFFFFBB;}
	#menu nav ul li a:hover{color: #FFFFFF;}
	/*#login:hover{background: #B2031D; color: #FFFFFF;}*/
	/*#login:hover svg .control{fill: #FFFFFF;}*/
	
	@media(max-width: 1023px){
		#menu{position: fixed; z-index: 9999; background: #153c66;}
		#menu #logo{width: 97px;}
		#menu #openMenu{display: inline-block; vertical-align: middle; cursor: pointer; padding-top: 30px; text-align: center; margin-left: 1em; color: #FFFFFF; position: relative; z-index: 10;}
		#menu #openMenu >span:before,#menu #openMenu >span:after,#menu #openMenu >span>span{
			content:""; position: absolute; left: 0; top: 15px; width: 100%; height: 2px; background: #FFFFFF;
			-webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%;
			-webkit-transition:transform .3s; -webkit-transition:-webkit-transform .3s; transition:-webkit-transform .3s; -o-transition:transform .3s; transition:transform .3s; transition:transform .3s, -webkit-transform .3s;
		}
		#menu #openMenu >span:before{-webkit-transform: translate(0,-7px); -ms-transform: translate(0,-7px); transform: translate(0,-7px);}
		#menu #openMenu >span:after{-webkit-transform: translate(0,7px); -ms-transform: translate(0,7px); transform: translate(0,7px);}

		#menu nav{ 
			position: fixed; top: 0; right: -100%; width: 100%; height: 100%;
			padding: 5em 2.5% 0; background: #153c66; margin: 0;
			-webkit-transition: right .7s; -o-transition: right .7s; transition: right .7s;
			z-index: -1; text-align: left;
		}
		#menu nav>ul>li{display: block; line-height: 2; border-top: 1px solid rgba(0,0,0,.3); position: relative;}
		
		#menu #checkMenu:checked ~ #openMenu > span span{-webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0);}
		#menu #checkMenu:checked ~ #openMenu > span:before{-webkit-transform: translateY(0) rotate(30deg); -ms-transform: translateY(0) rotate(30deg); transform: translateY(0) rotate(30deg);}
		#menu #checkMenu:checked ~ #openMenu > span:after{-webkit-transform: translateY(0) rotate(-30deg); -ms-transform: translateY(0) rotate(-30deg); transform: translateY(0) rotate(-30deg);}
		#menu #checkMenu:checked + nav{right: 0;}
	}

/* Footer */
	#footer{ background: #B70565; color: white; padding: 3rem 0 1em; font-size: 12px; line-height: 1.2; font-weight: 700;}
	#footer .wrap{ 
		display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;
	}
	#footer .logo{display: block; width: 210px; background: url(../img/logo.svg) no-repeat;}
	#footer .logo:before{content: ""; display: block; width: 100%; padding-top: 41%;}
	#footer a:hover{opacity: .7;}
	#footer .wrap > div{ -webkit-box-flex:1; -ms-flex:1; flex:1; margin-bottom: 2rem; padding: 2em 0;}
	#footer .wrap > div:nth-child(1){-webkit-box-flex: 0;-ms-flex: 0 0 250px;flex: 0 0 250px; width: 250px; margin-right: 2em;}
	#footer .wrap > div:nth-child(1) a{display: inline-block; margin: 0 1em 1em 0; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto;}
	
	#footer .wrap > div:nth-child(2){-webkit-box-flex: 0;-ms-flex: 0 0 auto;flex: 0 0 auto; max-width: 200px; padding-right: 3em; margin-right: 3em; border-right: 1px solid; }
	#footer .wrap > div:nth-child(2) a{display: block; margin-bottom: 1.5em;}
	
	#footer .wrap > div:nth-child(3) > ul{
		display: -webkit-box; display: -ms-flexbox; display: flex; 
		-ms-flex-wrap: wrap; flex-wrap: wrap; 
		-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between; 
		-webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch;
	}
	#footer .wrap > div:nth-child(3) > ul > li:not(:last-child){margin-right: 2em;}
	#footer ul li a{display: block; margin-bottom: 1.5em;}
	#footer .sub-menu{display: block; font-weight: 300; margin-bottom: 3em; max-width: 130px;}
	#footer .sub-menu li a{font-weight: 300; margin-bottom: .8em;}

	@media(max-width: 1200px){
		#footer .wrap > div:nth-child(3) > ul{-webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; }
	}
	@media(max-width: 1000px){
		#footer .wrap{ -webkit-box-pack: center;-ms-flex-pack: center;justify-content: center; }
		#footer .wrap > div:nth-child(3) > ul{-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between; }
		#footer .wrap > div:nth-child(2){padding-right: 0; margin-right: 0; border: 0;}
		#footer .wrap > div:nth-child(3){min-width: 100%;}
	}
	@media(max-width: 767px){
		#footer .wrap > div:nth-child(3) > ul > li:not(:last-child){margin-right: 4em;}
		#footer .wrap > div:nth-child(3) > ul{-webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; }
		#footer .wrap > div:nth-child(1),
		#footer .wrap > div:nth-child(2){width: 100%; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; text-align: center; margin: 0;}
		#footer .wrap > div:nth-child(1) a,
		#footer .wrap > div:nth-child(2) a{margin: 1em;}
	}

/* Main */
	main .section:nth-child(1){margin-top: 5rem;}

	/* Hero */
		.hero{background: #0D3B66; color: #FFFFFF;}
		.hero .wrap{position: relative; padding: 10em 0 5em; min-height: 560px;}
		.hero .wrap div{width: 50%; max-width: 560px;}
		.hero img{position: absolute; bottom: 0; right: 0; width: 52%; height: auto;}
		.hero h2{position: relative; max-width: 470px;}
		.hero h2 span.u{position: relative; z-index: 2;}
		.hero h2 span.u:before{
			content: ""; position: absolute; left: -1%; top: 65%; width: 105%; height: .4em; 
			background: #B70565; z-index: -1; -webkit-transform: skew(-22deg,-2deg); -ms-transform: skew(-22deg,-2deg); transform: skew(-22deg,-2deg);
		}
		.hero h2:after{content: ""; display: inline-block; vertical-align: top; width: .7em; height: .71em; margin-left: .1em; background: url(../img/heart.png) center no-repeat; background-size: 100%;}
		@media(max-width: 1000px){
			.hero img{width: 45%; bottom: 15%;}
		}
		@media(max-width: 767px){
			.hero img{display: none;}
			.hero .wrap{padding: 7em 0 3em; min-height: 0;}
			.hero .wrap div{width: 100%;}
		}
	
	/* Treecol */
		.treecol{margin-top: 5em;}
		.treecol article{max-width: 280px; display: block; margin: 0 auto 6em; text-align: center;}
		.treecol article img{display: inline-block; margin-bottom: 2em;}
		@media(min-width: 1000px){
			.treecol .f{ 
				display: -webkit-box;display: -ms-flexbox;display: flex;
				-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-around;
				width: 100%;
			}
			.treecol .f article{margin: 0 1em 6em;}
		}
		@media(max-width: 1000px) and (min-width: 500px){
			.treecol article{
				max-width: 450px; text-align: left; display: -webkit-box; display: -ms-flexbox; display: flex;
				-webkit-box-align: center;-ms-flex-align: center;align-items: center;
			}
			.treecol article img{margin-right: 2em;}
		}
	
	/* Horizontal */
		.horizontal article{max-width: 580px; margin: 0 auto 6em;}
		.horizontal article img{display: block; margin: 0 auto 2em;}
		.horizontal article h3{line-height: 1.4;}
		.horizontal article p{line-height: 1.875;}

		@media(max-width: 767px){
			.horizontal article{text-align: center;}
			.horizontal article h2{line-height: 1.5;}
			.horizontal article h3{line-height: 1.8;}
			.horizontal article p{line-height: 2.14;}
		}
		@media(min-width: 1000px){
			.horizontal article{
				max-width: 100%;
				text-align: left; 
				display: -webkit-box; display: -ms-flexbox; display: flex;
				-webkit-box-align: center;-ms-flex-align: center;align-items: center;
			}
			.horizontal article img{margin: 0 3em 2em 0; width: 48%; width: calc(50% - 1.5em); -webkit-box-flex: 1;-ms-flex: 1 0 auto;flex: 1 0 auto;}
			.horizontal article > div{width: 48%; width: calc(50% - 1.5em); -webkit-box-flex: 1;-ms-flex: 1 0 auto;flex: 1 0 auto;}
			.horizontal article.right img{margin: 0 0 2em 3em; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2;}
			.horizontal article.right >div{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;}
		}
	
	/* Quotes */
		.quotes{margin-bottom: 6em;}
		.quotes article{
			position: relative;
			-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.16); box-shadow: 0 3px 6px rgba(0,0,0,.16); 
			max-width: 580px; padding: 2em; border-radius: 4px; margin: 0 auto 3em;
		}
		.quotes article:first-child:before{
			content: ""; position: absolute; width: 90px; height: 88px; background: url(../img/q1.png) center no-repeat;
			top: -1em; right: 90px;
		}
		.quotes article:last-child:before{
			content: ""; position: absolute; width: 90px; height: 95px; background: url(../img/q2.png) center no-repeat;
			bottom: -3em; left: 90px;
		}
		@media(min-width: 1000px){
			.quotes .wrap{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}
			.quotes article{
				width: 48%; width: calc(50% - 1.5em); margin: 0 0 3em;
				display: -webkit-box; display: -ms-flexbox; display: flex;
				-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
			}
			.quotes article p{-webkit-box-flex: 1;-ms-flex: 1 0 auto;flex: 1 0 auto; }
		}
		@media(max-width: 500px){
			.quotes article:first-child{padding-top: 4em;}
			.quotes article:first-child:before{right: auto; left: 50%; margin-left: -44px; top: -2em;}
			.quotes article:last-child{padding-bottom: 4em;}			
			.quotes article:last-child:before{right: auto; left: 50%; margin-left: -47px;}
		}

	/* Message */
		.message{padding: 1em 0; color: white;}
		.message.pink{background: #B70565;}
		.message.blue{background: #0D3B66;}
		.message .wrap{
			display: -webkit-box; display: -ms-flexbox; display: flex;
			-webkit-box-align: center;-ms-flex-align: center;align-items: center;
			-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;
		}
		.message .bt{flex: 0 0 auto; margin-left: 5%;}