:root {
--lqsf: 1;
--mobile:0;
}

html, body {
margin: 0px;
padding: 0px;
overflow: hidden;
height: 100%;
}

body {
background:#134868;
color:#ffffff;
font-family: 'robotoregular';
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-image:url("../img/bg.svg");
}

.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none; 
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; 
}


img {
  -webkit-user-drag: none;
  user-drag: none;
}


@font-face {
font-family: 'robotoregular';
src: url('../fonts/roboto-regular-webfont.woff2') format('woff2'), url('../fonts/roboto-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'robotobold';
src: url('../fonts/roboto-bold-webfont.woff2') format('woff2'), url('../fonts/roboto-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}


#preloadimages{
display:none;
}

#splash{
height: 100%;
display:none;
}

#fridge-screen{
height:100%;
display:none;
}

#fridge-screen-portrait{
height:100%;
display:none;
}

#overlay-screen{
height:100%;
display:none;
}

#overlay-screen-portrait{
height:100%;
display:none;
text-align: center;
}

#quiz-screen{
height:100%;
display:none;
}

#quiz-screen-portrait{
height:100%;
display:none;
text-align: center;
}



.container-between{
height:100%;
display: flex;
flex-direction: column;
position:relative;
justify-content: space-between;
}

.splash-header{
background: linear-gradient(to bottom, #376899, #063E56);
font-family: 'robotobold';
font-size: 5.5dvh;
padding-top: 1dvh;
padding-bottom: 1dvh;
padding-left: 2dvh;
padding-right: 2dvh;
border-radius:2dvh;
border:0.5dvh solid #ffffff;
box-shadow: 0px 5px 0px 0px rgba(0,0,0,0.3);
margin: auto;
max-width: 800px;
min-height:8dvh;
}

#row-portrait{
display:none;
}

.margin-top-screen{
margin-top:1.5dvw;
}

#row-landscape{
margin-top:2dvh;
}

.margin-bottom-2{
margin-bottom:2dvh;
}
#splashdescription{
font-size: 3.5dvh;
width: 70dvw;
margin:auto;
}

.logo img{
height:55dvh;
width:auto;

}

.fridge-background {
position: relative;
width: 100dvw;
height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

.fridge-container {
aspect-ratio: 16 / 9;
height: 100dvh;
max-width: 100dvw;
display: flex;
}

.fridge-col-1{
width: 45%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

.fridge-col-2{
width: 55%;
height: 100%;
display: flex;
flex-direction: column;
position:relative;
justify-content: space-between;
}

.fridgeani{
height:100%;
position: relative;	
cursor: pointer;
}

.fridgeani .fridgeani_img {
height:100%;
width:auto; 
}

.fridgeani-portrait{
width: 100dvw;
height: auto;
position: relative;	
cursor: pointer;	
}

.fridgeani-portrait .fridgeani_img{
width: 100%;
height: auto;
}

.product {
position: absolute;
cursor: pointer;
display: none;
}

.product img {
height: 100%;
width: auto;
}

.handicon {
position: absolute;
display: none;
}

.handicon img {
height: 100%;
width: auto;
}

.zoomicon {
position: absolute;
pointer-events: none; 
display:none;
}

.zoomicon img {
height: 100%;
width: auto;
}

.product-zoomicon{
position: absolute;
cursor:pointer;
z-index:1;
width: auto;
height:8%;
}

.product-zoomicon img {
height: 100%;
width: auto;
}



.fridge-window{

text-align:center;
background: linear-gradient(to bottom, #376899, #063E56);
border:0.5dvh solid #ffffff;
box-shadow: 0px 5px 0px 0px rgba(0,0,0,0.3);
padding: calc(var(--lqsf) * 60px);
padding-top: calc(var(--lqsf)* 40px);
margin: calc(var(--lqsf) * 50px);
border-radius: calc(var(--lqsf) *20px);
line-height:1.2;
height:100%;

}

.fridge-window-header{
font-family: 'robotobold';
font-size: calc(var(--lqsf) * 50px);
margin-bottom: calc(var(--lqsf) * 30px);
}

.fridge-window-body{
font-size: calc(var(--lqsf) * 36px);
}

.fridge-buttonrow{
display: flex;
justify-content: space-between;
padding-left: calc(var(--lqsf) * 60px);
padding-right: calc(var(--lqsf) * 60px);
margin-bottom: calc(var(--lqsf) * 60px);
}

.emptybutton{
width: calc(var(--lqsf) * 120px);
height: calc(var(--lqsf) * 120px);
}


.overlay-background {
position: relative;
width: 100dvw;
height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

.overlay-container {
aspect-ratio: 16 / 9;
height: 100dvh;
max-width: 100dvw;
display: flex;
}

.overlay-col-1{
width: 50%;
position: relative;
background: linear-gradient(to bottom, #D0D0D0, #FFFFFF);
border-top-left-radius: calc(var(--lqsf)* 20px);
border-bottom-left-radius: calc(var(--lqsf)* 20px);
border-top: 0.5dvh solid #ffffff;
border-left: 0.5dvh solid #ffffff;
border-bottom: 0.5dvh solid #ffffff;
}

.overlay-col-2{
width: 50%;
background: linear-gradient(to bottom, #376899, #063E56);
border-top-right-radius: calc(var(--lqsf)* 20px);
border-bottom-right-radius: calc(var(--lqsf)* 20px);
border-top: 0.5dvh solid #ffffff;
border-right: 0.5dvh solid #ffffff;
border-bottom: 0.5dvh solid #ffffff;	


}


.overlay-portrait-col-1{
width: 100%;
background: linear-gradient(to bottom, #D0D0D0, #FFFFFF);	
position: relative;
}


.overlay-portrait-col-2{
width: 100%;
height:100%;
background: linear-gradient(to bottom, #376899, #063E56);

}


.overlay-window{

display: flex;
text-align: center;
box-shadow: 0px 15px 0px 0px rgba(0, 0, 0, 0.3);
margin: calc(var(--lqsf)* 50px);
border-radius: calc(var(--lqsf)* 20px);
line-height: 1.2;
width: 100%;

}


.overlay-window-header{
font-family: 'robotobold';
font-size: calc(var(--lqsf) * 50px);
margin-bottom: calc(var(--lqsf) * 30px);
padding-top: calc(var(--lqsf)* 40px);
padding-left: calc(var(--lqsf)* 20px);
padding-right: calc(var(--lqsf)* 20px);

}

.overlay-window-body{
font-size: calc(var(--lqsf) * 36px);
padding: calc(var(--lqsf)* 60px);
padding-top: 0px;
}

.overlay-window-bodyoverlay-window-body a,
.overlay-window-body a:link,
.overlay-window-body a:visited,
.overlay-window-body a:hover,
.overlay-window-body a:active,
.overlay-window-body a:focus {
color: #ffffff;
text-decoration: underline;
}


.quiz-background {
position: relative;
width: 100dvw;
height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

.quiz-container {
aspect-ratio: 16 / 9;
height: 100dvh;
max-width: 100dvw;
display: flex;
}

.quiz-window{

display: flex;
text-align: center;
box-shadow: 0px 15px 0px 0px rgba(0, 0, 0, 0.3);
margin: calc(var(--lqsf)* 50px);
border-radius: calc(var(--lqsf)* 20px);
line-height: 1.2;
width: 100%;

}

.quiz-col-1{
width: 50%;
position: relative;
background: linear-gradient(to bottom, #D0D0D0, #FFFFFF);
border-top-left-radius: calc(var(--lqsf)* 20px);
border-bottom-left-radius: calc(var(--lqsf)* 20px);
border-top: 0.5dvh solid #ffffff;
border-left: 0.5dvh solid #ffffff;0.5dvh solid #ffffff;
border-bottom: 0.5dvh solid #ffffff;
}


.quiz-col-2{
width: 50%;
background: linear-gradient(to bottom, #376899, #063E56);
border-top-right-radius: calc(var(--lqsf)* 20px);
border-bottom-right-radius: calc(var(--lqsf)* 20px);
border-top: 0.5dvh solid #ffffff;
border-right: 0.5dvh solid #ffffff;
border-bottom: 0.5dvh solid #ffffff;

}

.quiz-col-2-right{
background: #00905E;
}


.quiz-question{
color:#00394C;	
font-size: calc(var(--lqsf) * 50px);
font-family: 'robotobold';
padding: calc(var(--lqsf) * 30px);
padding-bottom: 0px;
padding-top: 0px;
flex-shrink: 0;
}

.quiz-question-portrait{
background: linear-gradient(to bottom, #D0D0D0, #FFFFFF);
color: #00394C;
font-family: 'robotobold';
font-size: 5.5dvw;
border-radius: 2.5dvw;
border: 0.8dvw solid #ffffff;
padding: 2dvw;
padding-top: 3dvw;
padding-bottom: 3dvw;
line-height: 1.2;
margin: 2dvw;
box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.3);
}


.answer-container-portrait-greenbox{
background: #00905E;
border-radius: 2.5dvw;
border: 0.8dvw solid #ffffff;
padding: 5dvw;
line-height: 1.2;
margin: 2dvw;
box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.3);
}

.answer-container-portrait-bluebox{
background: linear-gradient(to bottom, #376899, #063E56);
border-radius: 2.5dvw;
border: 0.8dvw solid #ffffff;
padding: 5dvw;
line-height: 1.2;
margin: 2dvw;
box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.3);
}

.quiz-questionnumber-portrait{
font-size: 5dvw;
padding: 3dvw;	
text-align:left;
}
.answer-score-portrait{
font-size: 5dvw;
padding: 3dvw;	
text-align:right;
}


.quiz-image{
flex-grow: 1;
min-height: 0;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

.quiz-image img{
max-height: 100%;
max-width: 100%;
object-fit: contain;
}

.quiz-header{

display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-shrink: 0;
}

.quiz-interface{

position: absolute;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
bottom: 0px;

}

.quiz-button{
padding: calc(var(--lqsf) * 20px);

}

.quiz-questionnumber{
font-size: calc(var(--lqsf) * 36px);
font-size: calc(var(--lqsf) * 36px);
padding: calc(var(--lqsf) * 20px);
padding-left: calc(var(--lqsf) * 30px);
padding-right: calc(var(--lqsf) * 30px);
color:#00394C;	
}


.productdetail{
position:absolute;
height:100%;
width: 100%;
display: flex;
align-items: center;
}

.productdetail-image{
	width:100%;
}

.productdetail-image img{
width:100%;
height:auto;
}

.productdetail-interface{
height:100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}


.productdetail-interface-top{

display: flex;
flex-direction: row;
justify-content: end;
align-items: center;
padding: calc(var(--lqsf) * 20px);
z-index:1;
}

.productdetail-interface-bottom{

display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: calc(var(--lqsf) * 20px);
z-index:1;
}



.productdetail-text{
color:#00394C;	
font-size: calc(var(--lqsf) * 50px);
}


.hoverbutton{
text-decoration: none;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: none;
background-size: contain;
background-repeat: no-repeat;
}

.greenbutton{
color: #ffffff;
font-family: 'robotobold';
width:50dvh;
height:14dvh;
font-size: 6dvh;
padding-bottom:1.1dvh;
background-image: url('../img/greenbutton.svg');
}

.greenbutton-small{
color: #ffffff;
font-family: 'robotobold';
width: 42dvh;
height: 12dvh;
font-size: 5dvh;
padding-bottom: 1dvh;
background-image: url('../img/greenbutton.svg');
}

.bluebutton-small{
color: #ffffff;
font-family: 'robotobold';
width: 42dvh;
height: 12dvh;
font-size: 5dvh;
padding-bottom: 1dvh;
background-image: url('../img/bluebutton.svg');
}
	
	

.greenbutton-lqsf{
color: #ffffff;
font-family: 'robotobold';
background-image: url('../img/greenbutton.svg');
width:calc(var(--lqsf) * 460px);
height:calc(var(--lqsf) * 128px);
font-size: calc(var(--lqsf) * 55px);
padding-bottom: calc(var(--lqsf) * 10px);

}

.infobutton {
width: 11dvh;
height:11dvh;
background-image: url('../img/infobutton.svg');
}

.infobutton-splash {
width: 11dvh;
height:11dvh;
background-image: url('../img/infobutton.svg');
}




.infobutton-portrait {
width: 11dvh;
height:11dvh;
background-image: url('../img/infobutton.svg');
}

.soundbutton {
width: 11dvh;
height:11dvh;
background-image: url('../img/soundbutton.svg');
}

.backbutton {
width: 11dvh;
height:11dvh;
background-image: url('../img/backbutton.svg');
}

.backbutton-lqsf {
width:calc(var(--lqsf) * 120px);
height:calc(var(--lqsf) * 120px);
background-image: url('../img/backbutton.svg');
}

.infobutton-lqsf {
width:calc(var(--lqsf) * 120px);
height:calc(var(--lqsf) * 120px);
background-image: url('../img/infobutton.svg');
}

.answer-container{

display: flex;
flex-direction: column;
justify-content:flex-start;
align-items: center;
height:100%;
margin-left: calc(var(--lqsf) * 20px);
margin-right: calc(var(--lqsf) * 20px);

}

.answer-container-portrait{

display: flex;
flex-direction: column;
justify-content:flex-start;
height:100%;

}


.answer-container-2{
display: flex;
flex-direction: column;
width:100%;
}

.answer-container-2-portrait{
display: flex;
flex-direction: column;	
margin: 2dvw;

}




.answer-header{
color: #ffffff;
font-size: calc(var(--lqsf) * 50px);
padding: calc(var(--lqsf) * 30px);
padding-bottom: calc(var(--lqsf) * 10px);
font-family: 'robotobold';

}

.quiz-result-text-portrait{
color: #ffffff;
font-size: 5dvw;

}

.quiz-result-text-portrait a,
.quiz-result-text-portrait a:link,
.quiz-result-text-portrait a:visited,
.quiz-result-text-portrait a:hover,
.quiz-result-text-portrait a:active,
.quiz-result-text-portrait a:focus {
color: #ffffff;
text-decoration: underline;
}


.answer-header-portrait{
    color: #ffffff;
    font-size: 7dvw;
	padding-top: 0dvw;
    padding-left: 2dvw;
	padding-right: 2dvw;
    padding-bottom: 5dvw;
    font-family: 'robotobold';
}



.answer-score{
color: #ffffff;
font-size: calc(var(--lqsf) * 36px);
padding: calc(var(--lqsf) * 20px);	
}

.quiz-result-text{
color: #ffffff;
font-size: calc(var(--lqsf) * 36px);
padding: calc(var(--lqsf) * 20px);	
}

.quiz-result-text a,
.quiz-result-text a:link,
.quiz-result-text a:visited,
.quiz-result-text a:hover,
.quiz-result-text a:active,
.quiz-result-text a:focus {
color: #ffffff;
text-decoration: underline;
}

#forwardbutton-quiz{
margin-bottom: calc(var(--lqsf) * 30px);
}

#restartbutton{
margin-bottom: calc(var(--lqsf) * 30px);
}

.answer-box{
text-decoration: none;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width:100%;
margin-top: calc(var(--lqsf) * 20px);
margin-bottom: calc(var(--lqsf) * 20px);
}

.answer-box-col-1{
font-family: 'robotobold';
font-size: calc(var(--lqsf) * 44px);
color:#ffffff;
background-color:#00394C;
height:100%;
display:flex;
justify-content: center;
align-items: center;
padding-left: calc(var(--lqsf) * 20px);
padding-right: calc(var(--lqsf) * 20px);
padding-top: calc(var(--lqsf) * 2px);
padding-bottom: calc(var(--lqsf) * 2px);

border-top-left-radius: calc(var(--lqsf)* 20px);
border-bottom-left-radius: calc(var(--lqsf)* 20px);
border-top: 0.5dvh solid #00394C;
border-left: 0.5dvh solid #00394C;
border-bottom: 0.5dvh solid #00394C;

}
.answer-box-col-2{
background: linear-gradient(to bottom, #376899, #063E56);
color:#ffffff;
font-size: calc(var(--lqsf) * 36px);

height:100%;
display:flex;
justify-content: center;
align-items: center;
padding-left: calc(var(--lqsf) * 20px);
padding-right: calc(var(--lqsf) * 20px);
padding-top: calc(var(--lqsf) * 2px);
padding-bottom: calc(var(--lqsf) * 2px);

border-top-right-radius: calc(var(--lqsf)* 20px);
border-bottom-right-radius: calc(var(--lqsf)* 20px);
border-top: 0.5dvh solid #00394C;
border-right: 0.5dvh solid #00394C;
border-bottom: 0.5dvh solid #00394C;
width:100%;

/*transition: border-color 0.2s linear;
transition: background-color 0.2s linear;*/


}


.answer-box-portrait{
text-decoration: none;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width:100%;
line-height:1.2;
margin-bottom: 2dvw;
margin-top: 2dvw;
}

.answer-box-col-1-portrait{
font-family: 'robotobold';
font-size: 5dvw;
color: #ffffff;
background-color: #00394C;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding-left: 2dvw;
padding-right: 2dvw;
padding-top: 0.5dvw;
padding-bottom: 0.5dvw;
border-top-left-radius: 2.5dvw;
border-bottom-left-radius: 2.5dvw;
border-top: 0.8dvw solid #00394C;
border-left: 0.8dvw solid #00394C;
border-bottom: 0.8dvw solid #00394C;

}
.answer-box-col-2-portrait{
background: linear-gradient(to bottom, #376899, #063E56);
color: #ffffff;
font-size: 5dvw;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding-left: 1dvw;
padding-right: 1dvw;
padding-top: 0.5dvw;
padding-bottom: 0.5dvw;
border-top-right-radius: 2.5dvw;
border-bottom-right-radius: 2.5dvw;
border-top: 0.8dvw solid #00394C;
border-right: 0.8dvw solid #00394C;
border-bottom: 0.8dvw solid #00394C;
width: 100%;
}



.answer-hl-1{
color:#00394C;
background-color:#ffffff;
border-top: 0.5dvh solid #ffffff;
border-left: 0.5dvh solid #ffffff;
border-bottom: 0.5dvh solid #ffffff;
}
.answer-hl-2{
border-color:#ffffff;
border-top: 0.5dvh solid #ffffff;
border-right: 0.5dvh solid #ffffff;
border-bottom: 0.5dvh solid #ffffff;
}

.answer-hl-1-portrait{
color:#00394C;
background-color:#ffffff;
border-top: 0.8dvw solid #ffffff;
border-left: 0.8dvw solid #ffffff;
border-bottom: 0.5dvh solid #ffffff;
}
.answer-hl-2-portrait{
border-color:#ffffff;
border-top: 0.8dvw solid #ffffff;
border-right: 0.8dvw solid #ffffff;
border-bottom: 0.8dvw solid #ffffff;
}


.answer-right-1{
color:#ffffff;
background-color:#008F5E;
border-top: 0.5dvh solid #ffffff;
border-left: 0.5dvh solid #ffffff;
border-bottom: 0.5dvh solid #ffffff;


}
.answer-right-2{
border-color:#ffffff;
border-top: 0.5dvh solid #ffffff;
border-right: 0.5dvh solid #ffffff;
border-bottom: 0.5dvh solid #ffffff;
background:linear-gradient(to bottom, #008F5E, #005234);
}

.answer-right-1-portrait{
color:#ffffff;
background-color:#008F5E;
border-top: 0.8dvw solid #ffffff;
border-left: 0.8dvw solid #ffffff;
border-bottom: 0.5dvh solid #ffffff;
}
.answer-right-2-portrait{
border-color:#ffffff;
border-top: 0.8dvw solid #ffffff;
border-right: 0.8dvw solid #ffffff;
border-bottom: 0.8dvw solid #ffffff;
background:linear-gradient(to bottom, #008F5E, #005234);
}


.arrowbutton_left{
width: 18dvw;
height:18dvw;
background-image: url('../img/arrowbutton_left.svg');

}
.arrowbutton_right{
width: 18dvw;
height:18dvw;
background-image: url('../img/arrowbutton_right.svg');

}

.closebutton{
width: 18dvw;
height:18dvw;
background-image: url('../img/closebutton.svg');
}


.arrowbutton_left-lqsf {
width:calc(var(--lqsf) * 120px);
height:calc(var(--lqsf) * 120px);
background-image: url('../img/arrowbutton_left.svg');
}

.arrowbutton_right-lqsf {
width:calc(var(--lqsf) * 120px);
height:calc(var(--lqsf) * 120px);
background-image: url('../img/arrowbutton_right.svg');
}

.closebutton-lqsf {
width:calc(var(--lqsf) * 120px);
height:calc(var(--lqsf) * 120px);
background-image: url('../img/closebutton.svg');
}





.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
.modal-header {
font-family: 'robotobold';
color: #ffffff;
font-size:6vh;
}
.modal-content {
background-color: #0C5D8E;
margin: auto auto;
padding: 3dvh;
color:#ffffff;
border-radius: 20px;
text-align:center;
font-size:3dvh;
box-shadow: 0px 0px 0px 4px #FFFFFF, 0px 0px 0px 8px #000000;
position:relative;
}
.modal-body{
padding-left: 4dvh;
padding-right: 4dvh;
padding-top:2dvh;
padding-bottom:4dvh;
}

#infowindow .modal-content{
width: 60vw;
max-width:1000px;
}

#welcomewindow .modal-content{
width: 60vw;
max-width:1000px;
}

#quizwindow .modal-content{
width: 60vw;
max-width:1000px;
}

#quitwindow .modal-content{
width: 60vw;
max-width:1000px;
}



@media (max-aspect-ratio: 16/9) {

.fridge-container {
width: 100vw;
height: auto;
}

.overlay-container {
width: 100vw;
height: auto;
}

.quiz-container {
width: 100vw;
height: auto;
}


}

.only-landscape, .only-portrait {
height: 100%;
}

.only-landscape {
display: block;
}
.only-portrait {
display: none;
}


.pulse {
  animation: pulseOpacity .75s infinite ease-in-out;
}

@keyframes pulseOpacity {
  0%   { opacity: 0.5; }
  50%  { opacity: 1; }
  100% { opacity: 0.5; }
}



@media screen and (max-width:36em) {

/*****************************/
/* mobile */
/*****************************/

:root {
--mobile: 1;
}

.only-landscape{
display:none;
}
.only-portrait{
display:block;
}

.fridge-container {
width: 100vw;
height: 100vh;
aspect-ratio: auto;
border-radius: 0;
}

.overlay-container {
width: 100vw;
height: 100vh;
aspect-ratio: auto;
border-radius: 0;
}


.logo img{
width:95dvw;
height:auto;
}

.greenbutton{
font-size: 9dvw;
width: 73dvw;
height:20dvw;
padding-bottom:2dvw;
}

.greenbutton-small{
font-size: 9dvw;
width: 73dvw;
height:20dvw;
padding-bottom:2dvw;
}

.bluebutton-small{
font-size: 9dvw;
width: 73dvw;
height:20dvw;
padding-bottom:2dvw;
}


.splash-header{
font-size: 7.5dvw;
padding-top: 2dvw;
padding-bottom: 2dvw;
border-radius: 2.5dvw;
border:0.8dvw solid #ffffff;
min-height:10dvw;
}

#splashdescription{
font-size: 5dvw;
width:80dvw;
margin:auto;
}

.infobutton {
width: 18dvw;
height:18dvw;
}

.infobutton-portrait{
width: 18dvw;
height:18dvw;
}

.infobutton-splash{
width: 18dvw;
height:18dvw;
}


.soundbutton {
width: 18dvw;
height:18dvw;
}

.backbutton {
width: 18dvw;
height:18dvw;
}


#row-landscape{
display:none;
}
#row-portrait{
display:flex;
}

.margin-bottom-2{
margin-bottom:2dvw;
}

#infowindow .modal-content{
width: 80vw;
}

#welcomewindow .modal-content{
width: 80vw;
}

#quizwindow .modal-content{
width: 80vw;
}
#quitwindow .modal-content{
width: 80vw;
}


.modal-content {
box-shadow: 0px 0px 0px 4px #FFFFFF, 0px 0px 0px 8px #000000;
font-size:5dvw;
padding: 4dvw;
}

.modal-header{
font-size:7dvw;
}
.modal-body{
padding-left: 0dvw;
padding-right: 0dvw;
padding-top: 2dvw;
padding-bottom: 4dvw;
}


.overlay-window-header{
font-family: 'robotobold';
font-size: 6dvw;
margin-bottom: 3dvw;
padding-top: 4dvw;
padding-right: 2dvw;
padding-left: 2dvw;

}

.overlay-window-body{
font-size: 4dvw;
padding: 6dvw;
padding-top: 0px;
}

.productdetail-interface{
position: absolute;
top: 0;
left: 0;
width: 100%;	

}

.productdetail-interface-top{
padding-top: 1.5dvw;
padding-right: 2dvw;
padding-left: 2dvw;
z-index: unset;

}
.productdetail-interface-bottom{
padding-top: 1.5dvw;
padding-right: 2dvw;
padding-left: 2dvw;
z-index: unset;
}


.productdetail-text{
font-size: 7dvw;
}

.product-zoomicon{
height:10%;
}



}