@import url(https://fonts.googleapis.com/css?family=Roboto);

/* Algemeen \*/

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* reset */
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, 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: 0px;	padding: 0px;	border: 0px;	font-size: 100%;	vertical-align: baseline;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
/* einde reset */

body {line-height: 1;}
/*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;}

*:focus {outline: none;}

html {height:100%;} 

body { 
	margin: 0px; 
	padding: 0px; 
	font-size: 15px; 
	font-family: 'Roboto', sans-serif;
	color: #fff; 
	background: #fff; 
	text-align: left;
	height:100%;
	overflow: hidden;
	opacity:0;
		-webkit-animation:fadeIn ease-in 1;
		-moz-animation:fadeIn ease-in 1;
		animation:fadeIn ease-in 1;
		-webkit-animation-fill-mode:forwards;
		-moz-animation-fill-mode:forwards;
		animation-fill-mode:forwards;
		-webkit-animation-duration:1s;
		-moz-animation-duration:1s;
		animation-duration:1s;
	}
	
	
a { color: #43484e; text-decoration: none; } 
a:hover { text-decoration: none; color:#000000;}
	
h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0;	font-family: 'Roboto', sans-serif;	}

.clear {clear: both;}
.pointer {cursor:pointer;}
.bg_inlog {background: url(/images_design/bg-inlog.jpg) no-repeat center bottom fixed;  -webkit-background-size: 100%;  -moz-background-size: 100%;  -o-background-size: 100%;  background-size: 100%;  background-color: #12a6e4;}
	
/* Einde algemeen */ 


/* DIV opmaak */

#wrapper 	{position:relative;width:100%;height:100%;display:flex;}


#login 	    {position:fixed;width:412px;height:212px;left:0px;top:0px;z-index:100;padding: 38px 0px 0px 38px;}
#login h1   {font-size: 40px;font-weight: 900;margin-bottom:20px;}
#login_logo {position:fixed;width:178px;height:110px;right:30px;bottom:30px;z-index:100;}
	
input           {border: 2px solid #013765;margin-bottom:10px;width:350px;height:30px;font-family : inherit;font-size: 100%;}
.inputUserLogin {background-image:url('/images_design/bg-input-user.jpg');background-repeat:no-repeat;padding-left:34px;}
.inputUserPwd   {background-image:url('/images_design/bg-input-password.jpg');background-repeat:no-repeat;padding-left:34px;}

#language	    {position:relative;float:left;font-size:14px;}
#language input {display:none;}
#language label {float:left;width:25px;height:25px;border: 2px #013765 solid;display:block;line-height:22px;text-align:center;color:#013765;cursor:pointer;background:white;position:relative;} 
#language input:checked + label:before{opacity:1;}
#language label:before{position:absolute;top:6px;left:6px;height:12px;width:12px;background:#013765 ;border-radius: 6px;content:'';opacity:0;}
	
.label 	{position:relative;float:left;width:36px;margin: 6px 0px 0px 10px;white-space: nowrap;}
		
#remember 	    {position:relative;float:left;font-size:14px;margin-left:12px;}
#remember input {display:none;}

#remember label {float:left;width:25px;height:25px;border: 2px #013765 solid;display:block;line-height:22px;text-align:center;color:#013765;font-size:40pt;cursor:pointer;background:white;} 
#remember input:checked + label:before{opacity:1;}
#remember label:before{position:absolute;top:8px;left:8px;height:12px;width:12px;background:#013765 ;border-radius: 6px;content:'';opacity:0;}
	
#form_send	{position:relative;float:right;margin-right:25px;}
.btnTransparent { background-color: transparent; border: none;}
				
#logo 	{
		position:fixed;
		width:178px;
		height:110px;
		right:20px;
		top:20px;
		z-index:100;
		}
div#rio {position:absolute;right:10px;top:10px;z-index:999;}

div#privacy         {position:absolute;left:15px;bottom:15px;width: 128px;height: 16px;text-align:left;z-index: +15; font-size:80%;}


		
        
#menuPaneFolded  {position:absolute;background-image: url("/images_design/menu-balk.png");background-repeat: no-repeat;background-size: 100%;-webkit-background-size: 100%;
-moz-background-size: 100%;-o-background-size: 100%;width:478px;height:88px;left:8px;top:0px;z-index:100;}
		
#stackmenu	     {position:absolute;top:0px;left:25px;width:57px;height:61px;z-index: 201;}
#hotspotsmenu	 {position:absolute;top:18px;left:106px;width:43px;height:43px;z-index: 201;}

#footer_wrapper         {position:absolute;left:0px;width: 100%;height: 60px;bottom:8px;}
#footer_inner_wrapper   {width: 100%;height:60px;margin: 0px auto;position:relative;color:#fff;background:#073e61;border-left: 8px solid white;border-right: 8px solid white;border-right: 8px solid white;
-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;	}

#footer_boog            {position:absolute;right:0px;top:0px;width: 128px;height: 60px;text-align:right;}
div#footer_privacy         {position:absolute;left:15px;top:25px;width: 128px;height: 16px;text-align:left;color:white;z-index: +15; font-size:80%;}
div#footer_privacy a       {color:white;}
#footer_title           {position:relative;padding: 20px 0px 0px 0px;width: calc(100vw - 50px);margin: 0px auto 0px;float:left;font-size:28px;z-index: +5;}

button {cursor:pointer;}

div#productOverview     {position:absolute;width:100%;top:150px;bottom:10.00vh; text-align:center;}
div#productOverview .overview  {}    
div#productOverview .item        {display:inline-block ;width: 300px;margin-right:10px;margin-bottom:10px;text-align:center;}
div#productOverview .itemLabel   {text-align:center;width:100%;}

div#editorTitle         {position:absolute;width:100%;height: 25px;left:135px;top:20px;font-size:120%;font-weight:bolder;}
div#editorProductOverview     {position:absolute;left:5px;right:1px;top:100px;bottom:0.00vh; text-align:left;}
div#editorProductOverview .overview  {}    
div#editorProductOverview .viewport  {}
div#editorProductOverview .item      {display:inline-block ;width: 300px;margin-right:20px;margin-bottom:20px;text-align:center;}
div#editorProductOverview .itemLabel {width:100%;margin-top:-17px;margin-bottom: 22px;}

div#editorTitle         {position:absolute;width:100%;height: 25px;left:135px;top:20px;font-size:120%;font-weight:bolder;}
div#uspProductOverview     {position:absolute;left:5px;width:420px;top:100px;bottom:0.00vh; text-align:left;}
div#uspProductOverview .overview  {} 
div#uspProductOverview .viewport  {}    
div#uspProductOverview .item      {width: 400px;margin-bottom:5px;text-align:left;font-size:90%;}
div#uspProductOverview .item.entry {height:20px;overflow:hidden;line-height:20px;}
div#uspProductOverview .item.entry > span {font-size: 80%;}
div#uspProductOverview .item.entry > button > img {vertical-align:middle;}
div#uspProductOverview .item.listLabel {margin-bottom:15px;margin-top:15px;font-size:100%;}

div#uspProductEditor     {position:absolute;left:460px;right:10px;top:100px;bottom:0.00vh; text-align:left;}
div#uspProductEditor    .overview  {} 
div#uspProductEditor    .viewport  {}    
div#uspProductEditor    .item      {width: 400px;margin-bottom:5px;text-align:left;font-size:90%;}
div#uspProductEditor    .editPaneLeft {float:left; width: 500px; margin-right: 15px;}
div#uspProductEditor    .editPaneRight {float:left;width: 500px;margin-bottom:15px;}
.W100P  {width:100%;}

input[type=text].clean  {border: none;outline: none;text-align: left;margin-bottom: 10px;font-family : inherit;font-size: 100%;}
input[type=file].clean  {border: none;outline: none;text-align: left;margin-bottom: 10px;font-family : inherit;font-size: 100%; background:white; color:#00afef;}

textarea.clean          {border: none;outline: none;text-align: left;margin-bottom: 10px;resize: none;font-family : inherit;font-size: 95%;}

div.thumblisting        {width:100%;margin-top: 5px;text-align:left;min-height:40px;}
img.thumb               {height:45px;margin-right: 5px;margin-bottom:5px;float:left;}

img#loadingUSPForm      {position:absolute;display:none;margin-top:-50px;height:144px;margin-left:-165px;}

div.maxSlideHeight      {max-height:310px;overflow:hidden;text-align:center;}
/*div.maxSlideHeight img  {min-height:310px;max-height:330px;min-width: 100%;width:100%;max-width:120%;min-height:310px;max-width:100%;}*/
div.maxSlideHeight img  {max-height:310px;}
div.maxSlideHeight img.ratiofix  {width:100%;}

        
#model_wrapper      {position:relative;width:100vw;}
#model              {position:absolute;bottom:10.00vh;display:block;}
		
#menuPane  {position:relative;float:left; width:100%; min-height:80%; min-width: 475px; max-width:475px;  margin: 0px 0px 60px 8px;background: #00afef;z-index: 151;height: calc(100% - 78px); display: none;}
/*#uspPane   {position:absolute;left:0px; width:100%;  min-height:80%; max-width:475px; margin: 0px 0px 60px 8px;background: #00afef;z-index: 152;height: calc(100% - 78px); display: none;}*/
#uspPane   {position:relative;float:left; width:100%;  min-height:80%; max-width:475px; margin: 0px 0px 60px 8px;background: #00afef;z-index: 152;height: calc(100% - 78px); display: none;}
#editorPane,#userPane,#productPane{position:absolute;left:0px; width:100%; min-height:80%;  margin: 0px 0px 60px 8px;background: #00afef;z-index: 152;height: calc(100% - 78px); display: none;}

/*#editorPane,#userPane,#productPane  {position:relative;float:left; width:100%; min-height:80%; min-width: 475px; margin: 0px 0px 60px 8px;background: #00afef;z-index: 151;height: calc(100% - 78px); display: none;}
*/

		
#button_close	{float: right;margin-top:8px;width:57px;height:61px;z-index: 999;}

#product {
		position:relative;
		font-size:15px;
		font-weight:bold;
		margin: 0px 5px 0px 10px;
		height: calc(100% - 10px);
		}
#editor{
		position:relative;
		font-weight:bold;
		margin: 0px 5px 0px 10px;
		height: calc(100% - 10px);

		}		
#menu{
		position:relative;
		font-size:15px;
		font-weight:bold;
		margin: 88px 0px 0px 0px;
		height: calc(100% - 128px);
		}
		
#usp{
		position:absolute;
		font-size:15px;
		line-height:18px;
        top:88px;left:15px;right:0px;bottom:10px;
/*		margin: 88px 0px 128px 0px;*/
		/*padding: 0px 20px 128px 20px;*/
	/*	height: 100%;*/

		}
.newUsp {
        font-size: 80%;
        color:red;
        }

#icons{
		position:relative;
		float:right;
		width:44px;
		margin: 0px 5px 0px 10px;
		}
		
#icons img{
		margin-top:5px;
		}
		
.slideshow{
		margin: 15px 0px 15px 0px;
		}
		
#video          {}
#video_left     {position:relative;float:left;margin-right:11px;}
#video_right    {position:relative;float:left;}
		
.video_button               {position:absolute;top:44px;left:65px;}
.video_button img           {opacity: 0.85;filter: alpha(opacity=85);}
.video_button img:hover     {opacity: 1.0;filter: alpha(opacity=100);}
			
/* einde DIV opmaak */
		
/* begin text styles \*/

ul,ol {
    padding-left:16px;
    list-style-position: outside;
    list-style-type:disc;
}
		
#menu li:nth-child(even) {background: #33bff2; line-height:28px;}
#menu li:nth-child(odd) {background: #08a3dc; line-height:28px;}

li {
	color:#fff;
/*	padding-left:16px;
	list-style-position: outside;
	list-style-type:disc;*/
}

li a{
	color:#fff;
}

li a:hover{
	color:#073e61;
}
/*
ul {
    list-style-position: inside;
	list-style-type:none;
}*/
/*
#usp li {
	margin-bottom:10px;
	list-style-position: inside;
	list-style-type:disc;
	padding-left:0px;
	}
*/
h2 {
	font-size:16px;
	font-weight:bold;
	margin-bottom:8px;
	}

/* einde text styles \*/

/* 360 home \*/
			
.reel-annotation { width:28px;height:28px;position:relative;color:red;visibility:visible;margin-left:-14px;margin-top:-14px;}
.reel-annotation a img {opacity: 0.8; filter: alpha(opacity=80); }
.reel-annotation a:hover img {opacity: 1.0; filter: alpha(opacity=100); }

/* 360 home */

/* responsive \*/

@media only screen and (min-width : 0px) and (max-width : 350px) {

#login_logo 	{
		width:50px;
		height:31px;
		right:5px;
		bottom:5px;
		}
		
input {
		height:30px;
		width:200px;
		height:25px;
	}
	
.inputUserLogin {background-image:url('/images_design/bg-input-user-mobile.jpg');padding-left:34px;}
.inputUserPwd   {background-image:url('/images_design/bg-input-password-mobile.jpg');padding-left:34px;}
	
#login h1 {
		font-size: 24px;
		}
		
#language  label{
    width:20px;
    height:20px;
    line-height:22px;
    } 

#language label:before{
        top:5px;
        left:5px;
        height:10px;
        width:10px;
    }
	
.label 	{
		width:28px;
		margin: 6px 0px 0px 7px;
		font-size:12px;
		}
		
#remember 	{
		position:relative;
		float:left;
		font-size:12px;
		margin-left:9px;
		}

#remember label{
    width:20px;
    height:20px;
    color:#013765;
    font-size:45pt;
    } 

#remember label:before{
        top:5px;
        left:5px;
        height:10px;
        width:10px;
    }

#form_send	{
		float:left;
		position:relative;
		width:290px;
		text-align:center;
		margin-top:14px;
		}

		
}

@media only screen and (min-width : 351px) and (max-width : 600px) {

#login_logo 	{
		width:70px;
		height:43px;
		right:15px;
		bottom:15px;
		}
}

@media only screen and (min-width : 601px) and (max-width : 750px) {
#login_logo 	{
		width:89px;
		height:55px;
		right:20px;
		bottom:20px;
		}
		
}

@media only screen and (min-width : 0px) and (max-width : 400px) {

#logo 	{
		width:81px;
		height:50px;
		right:15px;
		top:10px;
		}
}

@media only screen and (min-width : 400px) and (max-width : 750px) {

#logo 	{
		width:120px;
		height:74px;
		right:15px;
		top:10px;
		}
}

@media only screen 
and (min-width : 351px)
and (max-width : 750px) {


#login 	{
		position:relative;
		margin: auto;
		}
		
input {
		height:30px;
		width:255px;
		height:25px;
	}
	
.inputUserLogin {background-image:url('/images_design/bg-input-user-mobile.jpg');padding-left:34px;}
.inputUserPwd   {background-image:url('/images_design/bg-input-password-mobile.jpg');padding-left:34px;}
	
#login h1 {
		font-size: 30px;
		}
		
#language  label{
    width:20px;
    height:20px;
    line-height:22px;
    } 

#language label:before{
        top:5px;
        left:5px;
        height:10px;
        width:10px;
    }
	
.label 	{
		width:36px;
		margin: 6px 0px 0px 10px;
		}
		
#remember 	{
		position:relative;
		float:left;
		font-size:14px;
		margin-left:10px;
		}

#remember label{
    width:20px;
    height:20px;
    color:#013765;
    font-size:45pt;
    } 

#remember label:before{
        top:5px;
        left:5px;
        height:10px;
        width:10px;
    }

#form_send	{
		float:left;
		position:relative;
		width:290px;
		text-align:center;
		margin-top:14px;
		}

}

@media only screen 
and (min-width : 751px)
and (max-width : 1000px) {

#login_logo 	{
		width:110px;
		height:68px;
		right:25px;
		bottom:25px;
		}
}

@media only screen 
and (min-width : 0px)
and (max-width : 700px) {

#menuPaneFolded	{
		width:240px;
		height:60px;
		background-image: url("/images_design/menu-balk-mobile.png");
		}
		
#model {
		bottom:20.00vh;
		}
		
#footer_title {
		font-size:18px;
		}
		
#stackmenu	{
		width:47px;
		height:50px;
		}
		
#hotspotsmenu	{
		top:15px;
		left:86px;
		width:35px;
		height:35px;
		z-index: 201;
		}
	
}

@media only screen 
and (min-width : 0px)
and (max-width : 450px) {

    div#footer_privacy         {position:absolute;left:5px;top:41px;}	
}

@media only screen and (max-height : 500px) {

#logo 	{
		width:120px;
		height:74px;
		right:15px;
		top:10px;
		}
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     #uspPane   {position:relative;float:left; width:100%;  min-height:80%; max-width:475px; min-width:475px; margin: 0px 0px 60px 8px;background: #00afef;z-index: 152;height: calc(100% - 78px); display: none;}

}