/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
@font-face{
	font-family: 'stanga';
	font-weight: 400; /*(regular)*/
	font-style: normal;
	src: url('../fonts/stanga-regular-aaa.woff2') format('woff2'),
		url('../fonts/stanga-regular-aaa.woff') format('woff');
}
@font-face{
	font-family: 'stanga';
	font-weight: 900; /*(black)*/
	font-style: normal;
	src: url('../fonts/stanga-black-aaa.woff2') format('woff2'),
		url('../fonts/stanga-black-aaa.woff') format('woff');
}
body {
	line-height: 1;
	font-family: 'stanga', sans-serif;
	overflow: hidden;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img {
	max-width: 100%;
}
b{font-weight: 900;}
.main_wrap {
	background: url(../images/main_bg.jpg) no-repeat;
	background-size: cover;
	background-position: center;
	position: relative;
	display: flex;
	height: 100vh;
	overflow: hidden;
}
.content {
    display: flex;
    width: 50%;
    height: 100%;
    flex-direction: column;
    padding-right: 3.5vw;
    line-height: 1.3;
}
.header {
    display: inline-block;
    padding: 4vw 2.5vw 2vw;
    border-radius: 0vw 0vw 2vw 2vw;
    background: url(../images/header_bg.png) no-repeat;
    background-size: 100% 100%;
    background-position: top center;
    position: relative;
}
.header .top-title {
    font-size: 4.6vw;
    text-align: center;
    color: #012438;
    line-height: 1;
    letter-spacing: 1px;
 }
.header .top-title b {
    font-weight: 900;
    font-size: 5.6vw;
 }
.header .arrow {
    position: absolute;
    left: -5.8vw;
    bottom: -7.75vw;
    width: 7.244vw;
    height: 11.359vw;
}
.header .arrow img{max-height: 100%;}
.subtitle {
	margin-top: 2vw;
	margin-bottom: 1vw;
	padding-left: 20px;
}
.subtitle h2 {
	font-size: 2.9vw;
	color: white;
}
.subtitle h1 {
	color: #ffbc23;
	font-weight: 700;
	font-size: 4vw;
	margin-bottom: 20px;
}
.subtitle h1 img{margin: 0 10px;vertical-align: middle;max-width: 10vw;}
.text {
	color: white;
	font-size: 2vw;
	padding-left: 20px;
}
.text p {
	margin-bottom: 1rem;
}
.video {
	position: relative;
}
.video>img, .video .chips {
	position: absolute;
	pointer-events: none;
}
.video_wrap {
	width: 50%;
	display: flex;
	align-items: center;
}
.video_placeholder {
    width: 42vw;
    height: 23.5vw;
    cursor: pointer;
    z-index: 1;
    display: block;
    position: relative;
}
.logo {
	position: absolute;
	left: 3.5vw;
	top: 1.5vw;
	width: 7vw;    
	height: 5.6778vw;
}
.video_play {
	border: 0;
	background: transparent;
	padding: 0;
	transition: .5s;
	cursor: pointer;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.left_chips {
	left: -10vw;
	top: 1vw;
	z-index: 1;
	width: 16.9278vw;
}
.left_pack {
	left: -20vw;
	top: 14vw;
	z-index: 1;
	width: 41.875vw;
}
.right_pack {
	right: -20vw;
	top: -15vw;
	z-index: 1;
    width: 33.594vw;
}
.chips {
    position: absolute;
    height: 100vh;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
 }
.top_chips2 {
	left: 15vw;
	top: 2vw;
	position: absolute;
	width: 8.594vw;
}
.top_chips1 {
	left: 24vw;
	top: -3vw;
	position: absolute;
	width: 8.75vw;
}
.top_chips3 {
	left: 7vw;
	top: -4vw;
	position: absolute;
	width: 8.594vw;
}
.top_chips4 {
	left: 5vw;
	top: 7vw;
	position: absolute;
	width: 5.573vw;
}
.top_chips5 {
	left: 21vw;
	bottom:  6vw;
	position: absolute;
	width: 5.782vw;
}
.top_chips6 {
	left: 26vw;
	bottom:  -5vw;
	position: absolute;
	width: 8.75vw;
}
.top_chips7 {
	left: 16vw;
	bottom:  -7vw;
	position: absolute;
	width: 5.573vw;
}
.chips>img {
	z-index: -1;
}
.video_placeholder:hover .video_play {
    filter: drop-shadow(0px 3px 9px rgba(0, 35, 50, 0.63));
}
.mobile {
	display: none;
}
.desktop {
	display: block;
}
@media (min-height: 912px) and (min-width: 1200px) and (max-width: 1850px) {
	.subtitle {
		margin-top: 25vh;
	}
}
@media (max-width: 1050px) and (min-width: 800px) {
	body{overflow-y: auto;}
	.main_wrap {
		height: auto;
		min-height: 100vh;
	}
	.main_wrap {
		flex-wrap: wrap;
	}
	.content {
		width: 100%;
	}
	.video_wrap {
		width: 100%;
	}
	.header .top-title b {
		font-size: 12.5vw;
	}
	.header .top-title {
		font-size: 10vw;
	}
	.header {
		padding: 7vw 6.5vw 5.5vw;
	}
	.content {
		padding-left: 3.5vw;
	}
	.header_wrap {
		display: flex;
	}
	.header .arrow {
	    position: absolute;
	    left: -12.6vw;
	    bottom: -18.75vw;
	    width: 15vw;
	    height: 25vw;
	}
	.subtitle {
		margin-top: 10vw;
	}
	.subtitle h2 {
		font-size: 5vw;
		letter-spacing: 0px;
	}
	.subtitle h1 img{max-width: 20vw;}
	.subtitle h1 {
		font-size: 5vw;
	}
	.text {
		font-size: 3.8vw;
	}
	.video_wrap {
		justify-content: center;
	}
	.video_play {
		width: 30%;
		max-width: 100px;
	}
	.video_placeholder {
		width: 65vw;
		height: 36.5vw;
	}
	.video_wrap {
		margin-top: 15vw;
		margin-bottom: 15vw;
	}
	.logo {
		left: 3vw;
		width: 15vw;
	}
	.chips {
		height: 165%;
	}
	.top_chips1 {
		left: 42vw;
	}
	.top_chips2 {
		left: 30vw;
	}
	.top_chips3 {
		left: 18vw;
	}
	.top_chips4 {
		left: 13vw;
	}
	.top_chips5 {
		left: 31vw;
	}
	.top_chips6 {
		left: 50vw;
	}
	.top_chips7 {
		left: 18vw;
	}
	.right_pack {
		top: -16vw;
		right: -32vw;
		width: 48vw;
	}
}
@media (max-width: 1023px)  {
	.mobile {
		display: block;
	}
	.desktop {
		display: none;
	}
	.main_wrap {
		height: auto;
		min-height: 100vh;
		background: url(../images/main_bg-m.jpg) no-repeat;
		background-attachment: fixed;
		background-size: 100% 100%;
	}
	.main_wrap {
		flex-wrap: wrap;
	}
	.content {
		width: 100%;
	}
	.video_wrap {
		width: 100%;
	}
	.header .top-title b {
		font-size: 17.5vw;
	}
	.header .top-title {
		font-size: 14vw;
		line-height: 0.8;
	}
	.header {
		padding: 7vw 7.5vw 5.5vw;
		margin: auto;
		border-radius: 0vw 0vw 5vw 5vw;
	}
	.content {
		padding-left: 3.5vw;
	}
	.header_wrap {
		display: flex;
	}
	.header .arrow {
	    position: absolute;
	    left: -13.6vw;
	    bottom: -8.75vw;
	    width: 15vw;
	    height: 20vw;
	    display: none;
	}
	.subtitle {
		margin-top: 5vw;
		text-align: center;
		padding: 0 7vw;
	}
	.subtitle h2 {
		font-size: 9.5vw;
		letter-spacing: 0px;
		line-height: 1;
	}
	.subtitle h1 img{max-width: 25vw;}
	.subtitle h1 {
		font-size: 13vw;
		line-height: 1.2;
		letter-spacing: 0;
		margin-bottom: 5px;
	}
	.text {
		font-size: 7vw;
	    font-weight: 200;
	    text-align: right;
	    padding: 0px 7vw;
	    margin-top: 5vw;
	}
	.video_wrap {
		justify-content: center;
	}
	.header_video {
		position: relative;
	}
	.video_play {
		width: 30%;
		max-width: 100px;
	}
	.video_placeholder {
		width: 80vw;
		height: 44.5vw;
    	margin: auto;
    	margin-top: 7vw;
	}
	.video_wrap {
		margin-top: 15vw;
		margin-bottom: 15vw;
		height: 50vw;
	}
	.video {
		width: 100%;
		height: 100%;
	}
	.logo {
		left: 0vw;
		width: 25vw;
		position: relative;
		height: auto;
		margin: auto;
	}
	.chips {
		height: 165%;
	}
	.top_chips1 {
	    left: unset;
	    right: -16vw;
	    width: 23vw;
	}
	.top_chips2 {
	    left: 37vw;
	    width: 20vw;
	    top: 29vw;
	}
	.top_chips3 {
	    left: 23vw;
	    top: unset;
	    bottom: -13vw;
	    width: 25vw;
	}
	.top_chips4 {
	    left: -3vw;
	    width: 14vw;
	    top: -12vw;
	}
	.top_chips5 {
		left: 31vw;
		display: none;
	}
	.top_chips6 {
		left: 50vw;
		display: none;
	}
	.top_chips7 {
		left: 18vw;
	}
	.right_pack {
		top: -10vw;
	    width: 85vw;
	    right: unset;
	    left: -17vw;
	}
	body {
		overflow: auto;
	}
	.left_pack {
	    width: 100vw;
	    left: unset;
	    right: -40vw;
	    top: -12vw;
	}
	.header_video .left_chips {
	    position: absolute;
	    left: unset;
	    right: -23vw;
	    top: -13vw;
    	width: 42.9278vw;
	}
	.header_video .top_chips1 {
	    right: unset;
	    left: -1vw;
	    top: -40vw;
	    left: -15vw;
	    width: 27vw;
	}
}
@media (max-width: 640px){
	.video_play {
		width: 20%;
		max-width: 70px;
	}
}
#cookies {
  width: 100%;
  background-color: #1095d3;
  background: linear-gradient(90deg, #0194d3 0%, #14b6de 100%);
  padding: 13px;
  color: #001c36;
  font-size: 20px;
  display: none;
  z-index: 99999;
  position: fixed;
  bottom: 0;
  box-shadow: .25rem 0 .25rem rgba(0,0,0,.075);
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#cookies.open {
  display: block;
}

#cookies .container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
   width: 100%;
    margin: 0 auto;
    padding: 0;
    z-index: 2;
    max-width: 1920px;

}

#cookies .container .popup-content {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}

#cookies .container .popup-content p {
  margin-bottom: 0;
  font-size: 1.2rem;
  color: #fff;
}

#cookies .container .popup-content img {
  margin-left: 10px;
}

#cookies .container .popup-content a {
  color: inherit;
  text-decoration: underline;
}

#cookies .container .popup-content a:focus {
  border: 1px solid #000;
}

#cookies .container #close-cookies {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
  border: 0;
  background: none;
  padding: 1px 6px;
}

#cookies .container #close-cookies img {
  margin-right: 10px;
  filter: brightness(0) invert(1);

}