@font-face {
	font-family: 'Noah';
	src: url('fonts/Noah-Regular.eot');
	src: local('☺'), url('fonts/Noah-Regular.woff') format('woff'), url('fonts/Noah-Regular.ttf') format('truetype'), url('fonts/Noah-Regular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Noah';
	src: url('fonts/Noah-Bold.eot');
	src: local('☺'), url('fonts/Noah-Bold.woff') format('woff'), url('fonts/Noah-Bold.ttf') format('truetype'), url('fonts/Noah-Bold.svg') format('svg');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

html{min-height: 100%; overflow-x: hidden;}
body{margin: 0 auto; min-height: 100vh; white-space: normal; font-family: 'Noah', 'Arial', sans-serif; background: #FFFFFF; line-height: 1.1; font-size: 100%;}

body:before{
    content: '';
    background: url('images/cover-bg.svg') center bottom no-repeat #111111;
    background-size: cover;
    position: fixed;
    z-index: 0;
    display: block;
    top: 0;
    height: 100vh;
    left: 0;
    right: 0;
}

a{color: #000000; text-decoration: none;}
a, .button, .job a div, .test-area .option{
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

*{position: relative; margin: 0px; padding: 0px; list-style: none; vertical-align: top; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none !important; -moz-border-radius: 0px; -webkit-border-radius: 0px; -khtml-border-radius: 0px; border-radius: 0px; border: 0; font-weight: normal;}

b, strong{font-weight: bold;}
b *, strong *{font-weight: bold;}
p{margin: 20px auto; max-width: 760px; line-height: 1.4; font-size: 100%;}
.button{display: inline-block; padding: 10px 15px 10px 40px; color: #FFFFFF; font-weight: bold; background: url('images/arrow.svg') 15px center no-repeat #9e184b; background-size: auto 15px; border-radius: 5px; cursor: pointer;}
:hover.button{opacity: 0.8;}
.away{color: #000000; background-image: url('images/away.svg'); background-color: #FFCC00;}

body > div{background: #FFFFFF;}
.wrapper{margin: 0 auto; max-width: 1400px; padding: 40px;}

.top{position: absolute; top: 0px; left: 0px; right: 0px; z-index: 99; background: none;}
.top .wrapper{display: table; width: 100%; padding: 20px;}
.top-left, .top-right, .share{display: table-cell; vertical-align: middle; padding: 20px;}
.top-left{width: 100px;}
.top-right{width: 100px; text-align: right;}
.share{text-align: center;}
a.lg-logo{display: inline-block; width: 200px; height: 25px; background: url('images/lg-logo.svg') center center no-repeat; background-size: contain;}
a.logo{display: inline-block; width: 75px; height: 51px; background: url('images/tp-logo.svg') center center no-repeat; background-size: contain;}

.cover{color: #FFFFFF; background: none;}
.cover .wrapper{display: table; width: 100%; min-height: 100vh;}
.cover .wrapper .content{display: table-cell; vertical-align: middle;}
.cover span{display: block;}
.cover .headline1{font-size: 450%; font-weight: bold;}
.cover .headline2{margin: 10px 0px 40px; font-size: 300%;}
.cover p{margin: 0; color: rgba(255, 255, 255, 0.5); font-size: 125%;}
.cover a{display: inline-block; color: #9e184b; font-weight: bold; border-bottom: 1px solid #9e184b;}
.cover a:hover{color: #FFFFFF; border-color: #FFFFFF;}
.cover-bg{position: absolute; right: 0px; top: 25%; width: calc(50% - 40px); height: 100%; background: url('images/cover-monitor.png') left top no-repeat;}

@media only screen and (max-height: 1000px) {
.cover-bg{top: 20%;}
}
@media only screen and (max-height: 900px) {
.cover-bg{top: 15%;}
}
@media only screen and (max-height: 850px) {
.cover-bg{top: 10%;}
}
@media only screen and (max-height: 760px) {
.cover-bg{top: 5%;}
}
@media only screen and (max-height: 650px) {
.cover .wrapper .content{padding-top: 80px;}
}

.headline{display: block; margin-bottom: 20px; font-size: 300%; font-weight: bold;}

.article{color: #FFFFFF; background: none;}
.article .wrapper{padding: 300px 40px 80px; background: center center no-repeat; background-size: cover;}
.article .headline{font-size: 450%; line-height: 1; font-weight: bold;}
.article p{margin: 0 0 40px; color: rgba(255, 255, 255, 0.5); font-size: 125%;}

.menu{color: #FFFFF; background: #9e184b;}
.menu .wrapper{padding: 10px 40px;}
.menu .desc{display: inline-block; line-height: 46px; color: #FFFFFF; font-size: 115%; font-weight: bold; margin-right: 25px;}
.menu ul{display: inline-block;}
.menu li{display: inline-block; padding: 5px;}
.menu li a{display: block; padding: 7px 15px; color: #FFFFFF; font-size: 115%; border: 1px solid #FFFFFF; border-radius: 5px; cursor: pointer; opacity: 0.8;}
.menu li a:hover{color: #000000; background: #FFCC00; border-color: #FFCC00; opacity: 1;}
.menu li.current a{color: #000000 !important; font-weight: bold; border: 1px solid #FFFFFF !important; background: #FFFFFF !important; opacity: 1 !important;}
.menu li.notyet a{color: #FFFFFF !important; border: 1px solid #FFFFFF !important; background: none !important; opacity: 0.5 !important;}

.monitor{color: #FFFFFF; background: none;}
.monitor .wrapper{display: table; width: 100%; padding: 200px 40px 80px;}
.monitor .wrapper > div{display: table-cell;}
.monitor .info{width: 60%; padding-right: 40px;}
.monitor span{display: block;}
.monitor .headline{font-size: 450%; font-weight: bold;}
.monitor .desc{margin: 0px 0 40px; color: rgba(255, 255, 255, 0.5); font-size: 300%;}
.monitor li{padding:  10px 0px; color: rgba(255, 255, 255, 0.5); border-bottom: 1px dotted rgba(255, 255, 255, 0.5);}
.monitor li:last-child{border: 0;}
.monitor .button{margin-top: 30px;}
.monitor-pic{width: 40%; background: right top no-repeat; background-size: contain;}

.text .headline{margin: 0 auto 20px; max-width: 760px;}
.text .headline .number{display: inline-block; position: absolute; left: -60px; top: 5px; height: 40px; width: 40px; line-height: 40px; text-align: center; color: #FFFFFF; font-size: 60%; font-weight: bold; background: #9e184b; border-radius: 50%;}
.text .subheadline{color: #9e184b; font-size: 125%; font-weight: bold; margin: 40px auto 20px; max-width: 760px;}
.text p{line-height: 1.5; font-size: 110%;}
.text a{color: #9e184b; border-bottom: 1px solid #9e184b;}
.text a:hover{opacity: 0.8;}
.photo img{display: block; margin: 0 auto; width: 100%; max-width: 1400px; height: auto;}

.expert{border-top: 10px dashed #9e184b; border-bottom: 10px dashed #9e184b;}
.expert .wrapper{padding: 20px;}
.expert .wrapper > div{display: inline-block; padding: 20px;}
.expert .info{width: 280px; text-align: center;}
.expert .photo{width: 120px; height: 120px; margin: 0 auto; background: center center no-repeat; background-size: cover; border-radius: 50%;}
.expert span{display: block;}
.expert .name{margin: 20px 0px 5px; color: #9e184b; font-size: 125%; font-weight: bold;}
.expert .desc{font-size: 100%; color: rgba(0, 0, 0, 0.5);}
.expert .quote{width: calc(100% - 280px);}
.expert .quote p{margin: 20px 0;}

.gallery .wrapper{padding: 0px 0px 40px; text-align: center;}
.zoom {display:inline-block; position: relative;}
.zoom img {display: block; max-width: 100%; height: auto;}

.bx-controls{position: absolute; bottom: 30px; left: 30px; right: 30px; z-index: 88; text-align: center; width: auto;}
.bx-pager-item{display: inline-block;}
a.bx-pager-link{display: block; margin: 0px 7px 0px 8px; width: 15px; height: 15px; border: 0; background: url('images/pager.svg') center center no-repeat; background-size: contain; text-indent: 100%; white-space: nowrap; overflow: hidden;}
.bx-pager-item .active{background: url('images/pager-active.svg') center center no-repeat; background-size: contain;}

.tabs_block:after {content:""; display:block; clear:both;}
ul.tabs{margin: 30px -10px 20px;}
.tabs li {display: inline-block; padding: 5px 10px; font-size: 100%; text-align: center; cursor:pointer; border-radius: 20px; color: rgba(0, 0, 0, 0.5);
    -webkit-transition:all .2s linear 0s;
    -webkit-transition-delay:.2s 0s;
    transition:all .2s linear 0s;}
.tabs li:hover{color: #9e184b;}
.tabs li.active {color: #FFFFFF; background: #9e184b;}
.box {display:none;}
.visible, .open_tab {display: block;}

.chars .box ul{margin: 20px 0px;}
.chars .box li{display: inline-block; width: 50%; padding: 20px 0px; font-size: 125%; border-bottom: 1px dotted rgba(0, 0, 0, 0.5);}
.chars .box b{display: block; margin-bottom: 10px;}

.about ul{margin: 0px -20px;}
.about li{display: inline-block; width: 33%; padding: 140px 20px 20px; text-align: left; background: 20px 20px no-repeat; background-size: auto 100px;}
.about li:nth-child(3n+2){width: 34%;}
.about li span{display: block;}
.about li .title{font-size: 125%; font-weight: bold;}
.about li .desc{margin-top: 10px; font-size: 100%;}

.CTA .wrapper{padding: 80px 40px;}
.CTA{text-align: center; color: #FFFFFF; background: url('images/cta.svg') center center no-repeat #9e184b; background-size: cover;}
.CTA p{color: rgba(255, 255, 255, 0.5); font-size: 125%;}
.CTA .button{margin-top: 20px; font-size: 125%; color: #000000; background-image: url('images/test.svg'); background-color: #FFCC00;}

.job{background: center center no-repeat #FFF; background-size: cover;}

#job-designer, #job-coder, #job-engineer{color: #FFFFFF; background-color: #333;}
#job-designer .lead, #job-coder .lead, #job-engineer .lead{color: rgba(255, 255, 255, 0.5);}

#job-designer{background-image: url('images/job/designer.jpg');}
#job-trader{background-image: url('images/job/trader.jpg');}
#job-engineer{background-image: url('images/job/engineer.jpg');}
#job-coder{background-image: url('images/job/coder2.jpg');}
#job-cinema{background-image: url('images/job/cinema2.jpg');}
#job-marketing{background-image: url('images/job/marketing.jpg');}

.job .lead{margin: 20px 0;}
.job span{display: block;}
.job ul{margin: 40px -40px 0px;}
.job li{display: inline-block; width: 33%;}
.job li:nth-child(3n+2){width: 34%;}
.job li a{display: block; background: center center no-repeat; background-size: cover; overflow: hidden;}
.job .gradient{min-height: 360px; padding: 40px; background: url('images/job-gradient.png') center bottom repeat-x; opacity: 1;}
.job li a:hover .gradient{opacity: 0;}
.job .number{display: inline-block; height: 40px; width: 40px; line-height: 40px; text-align: center; color: #FFFFFF; font-size: 125%; font-weight: bold; background: #9e184b; border-radius: 50%;}
.job .title{position: absolute; left: 40px; right: 40px; bottom: 40px; color: #FFFFFF; font-size: 125%; font-weight: bold;}
.job li .desc{position: absolute; left: 0px; right: 0px; top: 200px; height: 100%; padding: 40px; color: rgba(255, 255, 255, 0.5); line-height: 1.4; font-size: 100%; background: rgba(0, 0, 0, 0.75); opacity: 0;}
.job li a:hover .desc{top: 0px; opacity: 1;}
.job li .button{position: absolute; bottom: 40px; left: 40px;}
.job .comingsoon{font-size: 125%;}
.cross{color: #FFFFFF; background: #333;}
.cross li, .only2 li{width: 50% !important;}
.cross ul{margin-bottom: 40px !important;}

.test .wrapper{padding: 40px 20px;}
.test .headline{margin: 0px 20px 20px; text-align: center;}
.test-area, .test-result{display: inline-block; width: 50%; padding: 20px;}

#test .steps div.step:not(:first-child) {display:none}
#test .results div.result:not(:first-child) {display:none}
#test .test-restart {display:none}

.test-area span{display: block;}
.test-area .progress{font-size: 200%; color: rgba(0, 0, 0, 0.5);}
.test-area .progress b{color: #9e184b; font-weight: bold;}
.test-area .question{margin: 20px 0px 30px; font-size: 125%; font-weight: bold;}
.test-area .options{border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 20px; overflow: hidden;}
.test-area li{border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
.test-area li:last-child{border: 0;}
.test-area .option{padding: 20px; font-size: 125%; cursor: pointer; background: rgba(0, 0, 0, 0.01);}
.test-area :hover.option{background: #FFCC00;}
.test-area :active.option{color: #FFFFFF; background: #9e184b;}
.test-area .test-restart{display: inline-block; margin-top: 30px; background-image: url('images/restart.svg');}

.test-result span{display: block;}
.test-result .result-headline{font-size: 200%;}
.test-result .result-headline b{color: #9e184b; font-weight: bold;}
.test-result .desc{margin: 10px 0px 30px; color: rgba(0, 0, 0, 0.5); font-size: 125%;}
.test-result img{width: 100%; height: auto;}
.test-result ul{margin: 30px 0px;}
.test-result li{padding:  10px 0px; color: rgba(0, 0, 0, 0.5); border-bottom: 1px dotted rgba(0, 0, 0, 0.5);}
.test-result li:last-child{border: 0;}
.test-result .button{margin-right: 10px;}

.footer{color: #FFFFFF; background: #9e184b;}
.footer .wrapper{display: table; width: 100%; padding: 20px;}
.footer-left, .footer-right, .share{display: table-cell; vertical-align: middle; padding: 20px;}
.footer-left{width: 400px;}
.footer-right{width: 400px; text-align: right;}


@media only screen and (max-width: 1000px) {
.cover .headline1{font-size: 360%;}
.cover .headline2{font-size: 240%;}
.cover p{font-size: 115%;}
.cover-bg{position: absolute; right: 0px; top: 25%; width: calc(50% - 40px); height: 100%; background: url('images/cover-monitor.png') left top no-repeat; background-size: contain;}

.headline{font-size: 240%;}

.article .wrapper{padding: 200px 40px 80px;}
.article .headline{font-size: 360%;}
.article p{font-size: 115%;}

.menu .desc{line-height: 43px; font-size: 100%;}
.menu li a{font-size: 100%;}

.monitor .wrapper{padding: 160px 40px 80px;}
.monitor .info{width: 60%; padding-right: 40px;}
.monitor .headline{font-size: 360%;}
.monitor .desc{font-size: 240%;}
.monitor li{font-size: 90%;}

.text .headline .number{position: relative; left: auto; top: auto; height: 36px; width: 36px; line-height: 36px; font-size: 60%; margin-right: 10px;}
.text .subheadline{font-size: 115%;}
.text p{font-size: 100%;}

.expert .info{width: 200px;}
.expert .photo{width: 80px; height: 80px; margin: 0 auto;}
.expert .name{font-size: 115%;}
.expert .desc{font-size: 90%;}
.expert .quote{width: calc(100% - 200px);}

.tabs li {font-size: 90%;}
.chars .box li{font-size: 115%;}

.about li{padding: 115px 20px 20px; background-size: auto 75px;}
.about li .title{font-size: 115%;}
.about li .desc{font-size: 90%;}

.CTA .wrapper{padding: 60px 40px;}
.CTA p{font-size: 115%;}
.CTA .button{font-size: 115%;}

.job .lead{font-size: 90%;}
.job li{width: 100% !important;}
.job .gradient{min-height: auto; padding: 160px 40px 40px;}
.job li a:hover .gradient{opacity: 1;}
.job .number{margin: 0px 0px 20px; height: 36px; width: 36px; line-height: 36px; font-size: 115%;}
.job .title{position: relative; left: auto; right: auto; bottom: auto; font-size: 115%;}
.job li .desc{display: none;}
.job .comingsoon{font-size: 115%;}
.job .button{font-size: 90%;}

.test-area .progress{font-size: 160%;}
.test-area .question{font-size: 115%;}
.test-area .option{font-size: 115%;}

.test-result .result-headline{font-size: 160%;}
.test-result .desc{font-size: 115%;}
.test-result li{font-size: 90%;}
.test-result .button{font-size: 80%; margin-bottom: 10px;}

.footer-left{width: 300px;}
.footer-right{width: 300px; font-size: 90%;}
}

@media only screen and (max-width: 760px) {
.monitor .info{display: block !important; width: 100% !important; padding-right: 0px; padding-bottom: 40px;}
.monitor-pic{display: block !important; width: 100% !important; height: 300px; background: center top no-repeat; background-size: contain;}

.footer-left, .footer-right, .share{display: block; text-align: center; width: 100%;}
}

@media only screen and (max-width: 650px) {
.wrapper{padding: 40px 20px;}

.top .wrapper{padding: 0px;}
.top-left{width: 100px;}
.top-right{width: 100px;}
a.lg-logo{width: 122px; height: 15px;}
a.logo{width: 44px; height: 30px;}

.cover .headline1{font-size: 300%;}
.cover .headline2{margin: 10px 0px 40px; font-size: 180%;}
.cover p{font-size: 100%;}

.headline{font-size: 180%;}

.article .wrapper{padding: 100px 20px 40px;}
.article .headline{font-size: 240%;}
.article p{font-size: 100%;}

.menu .wrapper{padding: 10px 20px;}
.menu .desc{line-height: 40px; font-size: 90%;}
.menu li a{font-size: 90%;}

.monitor .wrapper{padding: 120px 20px 80px;}
.monitor .headline{font-size: 300%;}
.monitor .desc{font-size: 180%;}
.monitor li{font-size: 80%;}
.monitor-pic{height: 240px;}

.text .headline .number{height: 30px; width: 30px; line-height: 30px;}
.text .subheadline{font-size: 100%;}
.text p{font-size: 90%;}

.expert .wrapper{padding: 20px 0px;}
.expert .wrapper > div{display: block; width: 100%;}
.expert .info{padding: 20px 20px 0px !important;}
.expert .photo{width: 80px; height: 80px; margin: 0 auto;}
.expert .name{font-size: 100%;}
.expert .desc{font-size: 80%;}
.expert p{font-size: 90%;}

.tabs li {font-size: 80%;}
.chars .box li{font-size: 100%; width: 100%;}

.about li{width: 50% !important; padding: 90px 20px 20px; background-size: auto 50px;}
.about li .title{font-size: 100%;}
.about li .desc{font-size: 80%;}

.CTA .wrapper{padding: 40px 20px;}
.CTA p{font-size: 100%;}
.CTA .button{font-size: 100%;}

.job .lead{font-size: 80%;}
.job ul{margin: 40px -20px 0px;}
.job .gradient{min-height: auto; padding: 100px 20px 40px;}
.job .number{margin: 0px 0px 20px; height: 30px; width: 30px; line-height: 30px; font-size: 100%;}
.job .title{font-size: 100%;}
.job .comingsoon{font-size: 100%;}
.job .button{font-size: 80%;}

.test .wrapper{padding: 40px 0px;}
.test-area, .test-result{width: 100%; padding: 20px;}
.test-area .progress{font-size: 120%;}
.test-area .question{font-size: 100%;}
.test-area .option{font-size: 100%;}
.test-result .result-headline{font-size: 120%;}

.footer .wrapper{padding: 20px 0px;}
.footer-right{font-size: 80%;}
}