/* montserrat-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url("fonts/Montserrat-Regular.woff2") format("woff2"), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url("fonts/Montserrat-Regular.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* montserrat-medium (500) - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url("fonts/Montserrat-Medium.woff2") format("woff2"), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url("fonts/Montserrat-Medium.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}                                  

/* montserrat-bold (700) - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url("fonts/Montserrat-Bold.woff2") format("woff2"), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url("fonts/Montserrat-Bold.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}


* {box-sizing:border-box;box-sizing:border-box;/*user-select:none;*/outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);font-family:"Montserrat",Arial,Helvetica,sans-serif;}
html {width:100%;height:100%;overflow-x:hidden;overflow-y:hidden;overscroll-behaviour:none;}
html.web {overflow-x:hidden;overflow-y:visible;overscroll-behaviour:auto;}
body {height:100%;transform:translateY(0px);overflow-y:hidden;overscroll-behaviour:none;margin:0;padding:0;background-color:#000;color:#fff;-webkit-tap-highlight-color: rgba(0,0,0,0);font-weight:normal;}
html.web body {height:auto;overflow-y:visible;overscroll-behaviour:auto;}
.pink {color:#b06;}

div#dbu {position:absolute;left:0;top:0;width:100%;height:400px;font:20px monospace;background:rgba(255,255,255,0.8);color:#000;z-index:2000001;overflow-y:auto;display:none;}

img#logo {position:absolute;left:50%;top:1.6%;width:47vw;transform:translateX(-50%);pointer-events:none;}
div#page {position:relative;width:100vw;overflow-x:hidden;background-image:none;background-repeat:no-repeat;background-position:left top;text-align:center;background-size:100%;  
  min-height:calc(150vw);
}
div#page.home {background-image:url("images/bck_home.png");}
div#page.home span.claim {position:absolute;left:0;top:65%;width:100vw;text-align:center;font-size:3.8vw;}
div#page.home button.btn_play {position:absolute;left:32vw;top:85%;outline:none;border:none;width:37vw;height:6%;font-size:4vw;background:url("images/bck_btn_play.svg") no-repeat left top;background-size:contain;color:#000;font-weight:500;cursor:pointer;}
div#page.home button.btn_play_aux {position:absolute;left:21vw;top:34%;outline:none;border:none;width:57vw;height:38%;background:none;cursor:pointer;}
div#page.country {background-image:url("images/bck_common.png");}
div#page.country span.wri_select {position:absolute;left:0;top:25%;width:100vw;text-align:center;font-size:3.8vw;}
div#page.country div.countrieslist {position:absolute;left:0;top:29%;width:100vw;height:71%;text-align:center;font-size:3.8vw;border:none;overflow:auto;scrollbar-color:#ccc #000;scrollbar-width:thin;}
div#page.country div.countrieslist button.btn_country {width:60%;margin-top:1.4vw;padding:1vw 0 1vw 0;margin-left:20%;margin-right:0;outline:none;border:none;display:block;background:url("images/bck_country.svg") no-repeat center center;background-size:contain;color:#fff;font-size:3.8vw;cursor:pointer;}
div#page.questions {background-image:url("images/bck_questions.png");}
div#page.questions span.pagecount {position:absolute;left:11vw;top:25%;width:20vw;color:#fff;text-align:left;font-size:3.4vw;}
div#page.questions p.question {position:absolute;padding:0;margin:0;left:10.2vw;top:29%;width:80vw;height:15%;background:url("images/bck_q.svg") no-repeat center center;background-size:100%;color:#000;font-weight:500;}
div#page.questions p.question span {position:absolute;left:0;top:50%;width:100%;font-size:3.3vw;padding-left:6%;padding-right:6%;transform:translateY(-50%);pointer-events:none;}
div#page.questions ul.answers {position:absolute;padding:0;margin:0;left:10.2vw;top:48%;width:80vw;height:44%;list-style:none;}
div#page.questions ul.answers li {position:relative;width:100%;height:26%;background-image:none;background-repeat:no-repeat;background-position:center top;text-align:center;background-size:100%;margin-bottom:6%;padding-top:3%;color:#fff;cursor:pointer;}
div#page.questions ul.answers li span {position:absolute;left:0;top:50%;width:100%;padding-left:18%;padding-right:6%;transform:translateY(-50%);font-size:3.3vw;line-height:3.4vw;letter-spacing:-5%;pointer-events:none;} 
div#page.questions ul.answers li:nth-child(1) {background-image:url("images/btn_answer_a.svg");}
div#page.questions ul.answers li:nth-child(2) {background-image:url("images/btn_answer_b.svg");}
div#page.questions ul.answers li:nth-child(3) {background-image:url("images/btn_answer_c.svg");}
div#page.final {background-image:url("images/bck_common.png");}
div#page.final img.finalimg {position:absolute;left:0;top:46.9%;width:100vw;display:none;}
div#page.final span.finalwri {position:absolute;left:0;top:36%;width:100vw;opacity:0;color:#fff;font-size:5vw;}
div#page.final span.finalscore {position:absolute;left:0;top:66%;width:100vw;color:#fff;font-size:4vw;}
div#page.final span.finaldownload a {position:absolute;left:0;top:72%;width:100vw;color:#fff;font-size:3vw;}
div#page.final div.references {position:absolute;left:5vw;top:81%;text-align:left;font-size:1.8vw;}
div#page.final div.references span {font-size:2.4vw;margin-left:0.8vw;}
div#page.final div.references ol {margin-top:1vw;margin-left:0;padding-left:0;}
div#page.final div.references ol li {margin-left:3vw;padding-left:0;}
div#page.final div.references ol li.accessed {margin-left:0.9vw;list-style:none;padding-top:0.4vw;}

/*----------*/
html div#footer {position:absolute;left:0;bottom:0;width:100vw;height:calc(27vw);background:#000;font-size:2.4vw;padding-top:1vw;border-top:1px solid #666;}
html.web div#footer {position:static;width:100vw;height:auto;/*height:calc(15vw);*/background:#000;color:#fff;font-size:2.4vw;}

div#footer span.footertop {display:block; text-align:center;}
div#footer span.footerleft {display:inline-block;width:26.6vw;float:left;text-align:center;margin-top:4vw;transform:translateY(-50%);}
div#footer span.footercenter {display:inline-block;width:40.1vw;float:left;text-align:center;margin-top:4vw;transform:translateY(-50%);background-image:url("images/dot.png"), url("images/dot.png");background-repeat: no-repeat, no-repeat;background-position:left center, right center;background-size:1.6vw, 1.6vw;}
div#footer span.footerright {display:inline-block;width:33.1vw;float:left;text-align:center;}
div#footer span.footerright img {width:20vw;/*height:8vw;*/}

@media (orientation:landscape) {
	img#logo {position:absolute;left:50%;top:-3%;width:20vw;transform:translateX(-50%);}
	div#page { min-height:calc(45vw);}
  div#page.home {background-image:url("images/bck_home_landscape.png");}
  div#page.home span.claim {position:absolute;left:0;top:62%;width:100vw;text-align:center;font-size:2.0vw;}
  div#page.home button.btn_play {position:absolute;left:39%;top:82%;outline:none;border:none;width:20.8vw;height:11%;font-size:2.2vw;line-height:0;background:url("images/bck_btn_play.svg") no-repeat left top;background-size:contain;cursor:pointer;}
	div#page.home button.btn_play_aux {position:absolute;left:39%;top:27%;outline:none;border:none;width:20.8vw;height:31%;background:none;cursor:pointer;}
	div#page.country {background-image:url("images/bck_common_landscape.png");}
	div#page.country span.wri_select {position:absolute;left:0;top:29%;width:100vw;text-align:center;font-size:2.2vw;}
	div#page.country div.countrieslist {position:absolute;left:22%;top:35%;width:57vw;height:64%;font-size:2.2vw;border:none;overflow:auto;scrollbar-color:#ccc #000;scrollbar-width:thin;}
	div#page.country div.countrieslist button.btn_country {width:29%;margin-top:1vw;padding:0.5vw 0 0.5vw 1vw;margin-left:0;margin-right:4%;outline:none;border:none;float:left;display:inline-block;background:url("images/bck_country_landscape.svg") no-repeat left center;background-size:100%;color:#fff;font-size:2vw;cursor:pointer;}
	div#page.questions {background-image:url("images/bck_common_landscape.png");}
	div#page.questions span.pagecount {position:absolute;left:9.3vw;top:23%;width:20vw;color:#fff;text-align:left;font-size:2.0vw;}
	div#page.questions p.question {position:absolute;padding:0;margin:0;left:9.3vw;top:30%;width:81vw;height:15%;background:url("images/bck_q_landscape.svg") no-repeat center center;background-size:auto 100%;color:#000;font-weight:500;}
	div#page.questions p.question span {position:absolute;left:0;top:50%;width:100%;padding-left:2.4%;padding-right:2.4%;font-size:2.0vw;transform:translateY(-50%);pointer-events:none;} 
	div#page.questions p.question span br {display:none;}
	div#page.questions ul.answers {position:absolute;padding:0;margin:0;left:9.3vw;top:48%;width:81vw;height:50%;list-style:none;}
	div#page.questions ul.answers li {position:relative;width:100%;height:31%;background-image:none;background-repeat:no-repeat;background-position:center top;text-align:center;background-size:100%;margin-bottom:1%;padding-top:0;color:#fff;cursor:pointer;}
	div#page.questions ul.answers li span {position:absolute;left:0;top:50%;width:100%;padding-left:10%;padding-right:3%;transform:translateY(-50%);font-size:2.0vw;line-height:2.2vw;letter-spacing:-5%;pointer-events:none;} 
	div#page.questions ul.answers li:nth-child(1) {background-image:url("images/btn_answer_landscape_a.svg");}
	div#page.questions ul.answers li:nth-child(2) {background-image:url("images/btn_answer_landscape_b.svg");}
	div#page.questions ul.answers li:nth-child(3) {background-image:url("images/btn_answer_landscape_c.svg");}
	div#page.final {background-image:url("images/bck_common_landscape.png");}
  div#page.final img.finalimg {position:absolute;left:24vw;top:19vw;width:52vw;display:none;}
  div#page.final span.finalwri {position:absolute;left:0;top:12.5vw;width:100vw;opacity:0;color:#fff;font-size:3vw;}
  div#page.final span.finalscore {position:absolute;left:0;top:31vw;width:100vw;color:#fff;font-size:2.6vw;}
  /*div#page.final div.references {position:absolute;left:2vw;top:81%;text-align:left;font-size:1.0vw;}*/

  div#page.final span.finaldownload a {position:absolute;left:0;top:35vw;width:100vw;color:#fff;font-size:2.1vw;}
  div#page.final div.references {position:static;margin-left:2vw;margin-top:39vw;text-align:left;font-size:1.0vw;}
	div#page.final div.references span {font-size:1.4vw;margin-left:0.8vw;}
	div#page.final div.references ol {margin-top:1vw;margin-left:0;padding-left:0;}
	div#page.final div.references ol li {margin-left:3vw;padding-left:0;}
	div#page.final div.references ol li br {display:none;}
	div#page.final div.references ol li.accessed {margin-left:2vw;list-style:none;padding-top:0.4vw;}

  
  /*----------*/
  html div#footer {position:absolute;left:0;bottom:0;width:100vw;height:calc(5.2vw);background:#000;font-size:1.6vw;padding-top:2.0vw;}
	html.web div#footer {position:static;width:100vw;height:calc(5.2vw);background:#000;font-size:1.6vw;padding-top:0.5vw;}
	div#footer span.footertop {display:block; text-align:center;}
	div#footer span.footerleft {display:inline-block;width:28.0vw;float:left;text-align:center;margin-top:2.6vw;transform:translateY(-50%);}
	div#footer span.footercenter {display:inline-block;width:39.4vw;float:left;text-align:center;margin-top:2.6vw;transform:translateY(-50%);background-image:url("images/dot.png"), url("images/dot.png");background-repeat: no-repeat, no-repeat;background-position:left center, right center;background-size:0.9vw, 0.9vw;}
	div#footer span.footerright {display:inline-block;width:32.6vw;float:left;text-align:center;}
	div#footer span.footerright img {width:13vw;/*height:8vw;*/}

}