html, body {
  height: 100%;
  width:100%;
  overflow:hidden;
  box-sizing: border-box;
}

html {

}
*, *:before, *:after {
  box-sizing: inherit;
}

/*div, span,header {box-sizing:border-box;}*/

body {
    margin:0px;
    font-family: Trebuchet MS, Trebuchet, Arial, Helvetica, sans-serif;}

body[unsupported] > #hdr{top:0px;opacity:1;}

body[load] > #hdr{opacity:1;}
body[active] > #hdr{top:0px;}
body[active] > #hdr > [fun="bdy"]{width:300px;}
body[active] > #hdr > [fun="ftr"]{opacity:1;}

body[active]  #screen{opacity:0;}
body[active]  #splash{opacity:0;}
body[active]  #title{opacity:1;}



#splash{position:absolute;display:block;opacity:1;font-size:18px;top:15px;transition:opacity 1s;}
#splash img{height:10px;margin-top:15px;}
#title{opacity:0;position:absolute;bottom:5px;width:100%;text-align:center;font-size: 28px;text-transform:uppercase;transition:opacity 1s 1s;}


#tip{
    position:fixed;
    bottom:300px;
    left:25px;
    background:yellow;height:50px;
    width:200px;
    font-size:11px;
    opacity:0;
    transition:opacity 1s 3s;
  }
#tip[active]{opacity:1;}




#hdr {
    height:100px;
    position:fixed;
    left:0px;right:0px;
    top: calc(50% - 50px);
    background: #1b4164;
    box-shadow: 0px 3px 20px rgba(0,0,0,0.3);
    color:white;
    z-index: 2000;
    opacity:0;
    transition:opacity 0.5s, top 1s 1s;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    overflow:hidden;
  }

#hdr > div[fun="hdr"]{
    position:absolute;
    background:#1b4164;
    top:0px;
    left:0px;
    width:325px;
    height:100%;
    padding:15px 0px 15px 10px;
    z-index:10;
  }


#hdr > div[fun="hdr"] a[fun="cd"]{
  float: left;
  border-right: 2px solid #fff;
    text-decoration: none;
    color: white;  
  font-size: 60px;
  font-weight: normal;
  text-align: center;
  padding-right: 15px;
  line-height: 70px;
  color: white;
  height: 70px;}



#hdr > div[fun="hdr"] div[fun="lbl"]{
  float: left;
  font-size: 18px;
  font-weight: normal;
  margin: 3px 0px 0px 15px;
  max-width: 65%;
  top:0px;
  }

#hdr > div[fun="bdy"]{
    position:relative;
    height:100%;
    width:400px;
    transition: width 0s 1s;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
    opacity:1;
    z-index:5;
    background:#1b4164;
  }

#hdr > div[fun="ftr"]{
    position:absolute;
    opacity:0;
    top:0px;
    right:0px;
    height:80%;
    margin:10px 10px 10px 0px;
    color: white;
    text-align: right;
    font-size: 12px;
    transition:opacity 1s 2s;
  }

#hdr > div[fun="ftr"] > div{position:fixed;}

[cmd]{
    cursor:pointer;
    background:rgb(255,255,255);
    -webkit-mask-position:center;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-size:100% 100%;  
  }

[cmd][fun="language"]{-webkit-mask-image:url('../img/icon/flag.svg');height:22px;width:22px;}

#language{
    right:5px;
    top:5px;
    font-size: 0.45em;
    width: 75px;
    font-weight: normal;
    border:1px solid rgba(0,0,0,0);
    background:#1b4164;
    transition:all 0.25s;
  }



#language [fun="hdr"]{height:21px;width:100%;cursor:pointer;opacity:0.75;}
#language [fun="hdr"]:hover{opacity:1;}
#language [fun="hdr"] div{display:inline-block;vertical-align:top;}

#language [fun="hdr"] div:first-of-type{
    width:calc(100% - 25px);
    text-align: right;
    font-size:16px;
}

#language[mode="100000"] [fun="hdr"] div:first-of-type:after{content:"en";}
#language[mode="100334"] [fun="hdr"] div:first-of-type:after{content:"es";}
#language[mode="100099"] [fun="hdr"] div:first-of-type:after{content:"fr";}
#language[mode="100151"] [fun="hdr"] div:first-of-type:after{content:"it";}
#language[mode="100109"] [fun="hdr"] div:first-of-type:after{content:"de";}
#language[mode="100287"] [fun="hdr"] div:first-of-type:after{content:"pt";}

#language [fun="hdr"] div:last-of-type{
  top:0px;
  right:0px;
  }

#language:hover,#language[active]{border:1px solid #fff;background:#768da2;color:#fff;}

#language:hover [cmd],#language[active] [cmd]{background:#fff;}

#language:hover [fun="bdy"],#language[active] [fun="bdy"]{height:95px;}

#language [fun="bdy"]{
    height:0px;
    overflow:hidden;
    position:relative;
    top:-1px;
    width:100%;
    transition:all 0.25s;
  }
  
#language [fun="itm"]{
    cursor:pointer;
    padding:1px 0px 1px 3px;
    text-align: left;
    font-size: 12px;
  }

#language [fun="itm"]:hover{font-weight:bold;}


#hdr div[fun="ftr"] div[fun="panel"]{cursor:pointer;right:5px;top:75px;font-size:16px;z-index:-1;opacity:0.75}
#hdr div[fun="ftr"] div[fun="panel"]:hover{opacity:1;}

#panel{
    position: absolute;
    height:calc(100%);
    width: 100%;
    left:0px;
    top:calc(100px - 100%);
    background:#fff;
    border-bottom:1px solid #ccc;
    z-index: 1499;
    transition:top 0.25s;
    background:#f7f7f7;
    overflow:hidden;
    opacity:0;
  }
#panel a{text-decoration:none;color:#000;}

#panel[mode]{top:100px;opacity:1;}
#panel > [fun="bdy"]{position:relative;height:100%;width:100%;overflow:hidden;}

#panel #about{height:100%;width:100%;overflow:hidden;color:rgb(28,8,8);
font-family:futura,"FranklinITCProLight","Helvetica Neue Light","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;}


#panel [fun="box"]{
    position:absolute;
    top:25px;
    width:275px;
    background:white;
    padding:10px;
    border:1px solid #e9e9e9;
    border-bottom-color:#d5d5d5;
    border-bottom-width:2px;
    border-radius:4px;
  }

#panel [fun="box"][mode="right"]{right:35px;text-align:center;width:225px;}
#panel [fun="box"][mode="left"]{left:25px;width:325px;min-height:500px;}
#panel [fun="box"][mode="center"]{width:auto;left:375px;right:285px;bottom:115px;overflow:hidden;}


#panel [fun="box"][mode="logo1"]{right:35px;text-align:center;width:225px;top:255px;}
#panel [fun="box"][mode="logo2"]{right:35px;text-align:center;width:225px;top:110px;}

#panel [fun="box"][mode="left"] [fun="hdr"],
#panel [fun="box"][mode="left"] [fun="hdr"]{}

#panel [fun="box"] [fun="hdr"]{font-weight:bold;}
#panel [fun="box"] div{margin:0px 0px 5px 0px;width:100%;font-size:13px;}
#panel [fun="box"] div:last-of-type{margin-bottom:0px;}

#panel #about div[itm]{line-height:1.4;}

#panel #about div [hdr]{font-size:16px;text-transform:uppercase;font-weight:bold;color:#000;}



#panel #about [fun="itm"]{cursor:pointer;width:calc(100% - 20px);}
#panel #about [fun="itm"] [fun="hdr"]{margin:1em 0em 0em 0em;font-size:16px;font-weight:bold;color:#000;user-select:none;}


#panel #about [fun="itm"] [fun="hdr"] span:first-of-type{
    display: inline-block;
    position:relative;
    top:-1.5px;
    background: #333;

    height:8px;
    width:8px;
    margin-right:5px;
    -webkit-mask-position:center;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-size:100% 100%;     

    -webkit-mask-image:url('../img/icon/square.svg');
  }
#panel #about [fun="itm"][active] [fun="hdr"] span:first-of-type{-webkit-mask-image:url('../img/icon/diamond.svg');}


#panel #about [fun="itm"] [fun="bdy"]{max-height:0px;width:100%;font-size:16px;overflow:hidden;transition:max-height 0.4s;}
#panel #about [fun="itm"][active] [fun="bdy"]{max-height:500px;}

#panel #about [fun="itm"] [fun="bdy"] div{line-height:1.4;margin:0.5em 0em 0em 1em;width:calc(100% - 15px);}
#panel #about [fun="itm"] [fun="bdy"] div:last-of-type{margin-bottom:1em;}
#panel div[intro]{line-height:1.4;font-size:16px;}
#panel div[p]{font-size:14px;margin-top:0.5em;}


#panel div[type="cmd"][fun="close"]{
    height: 25px;
    width: 25px;
    position: absolute;
    right: 5px;
    top: 20px;
  }

#options{
    display:none;
    position:absolute;
    background:white;
    color:gray;
    font-size: 12px;
    right: 5px;
    top: 40px;
    width: 150px;
    border: 1px solid #ccc;
  }

#options > [fun="hdr"]{
  height:18px;
  line-height:14px;
  padding:2px;
  font-weight:bold;
  color:black;
  background:#ccc;
  }



#options > [fun="bdy"]{padding:0px 5px 5px 5px;}
  
#options[active]{display:block;z-index:1501;}

#options [fun="grp"]{margin:5px 0px 5px 0px;}

#options [fun="grp"] [fun="hdr"]{color:black;font-weight:bold;margin:0px 0px 3px 0px;}

#options [fun="bdy"] [fun="opt"]{
    display:inline-block;
    padding:3px 5px 3px 5px;
    border:1px solid;
    color:gray;
    border-radius:3px;
    cursor:pointer;
    margin-right:5px;
    
  }

#options [fun="bdy"] [fun="opt"]:last-of-type{margin-right:0px;}

#options [fun="bdy"] [fun="opt"]:hover{color:rgb(0,0,0);}

#options [fun="bdy"] [fun="opt"][active]{
    background:rgba(100,0,100,0.75);color:rgb(0,0,0);
  }


#hds{top:35px;font-size:small;background-color:#F0F0F0;}

#screen{
    position:fixed;
    pointer-events:none;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background: #2c659a;
    z-index:1500;
    transition:opacity 1s 1s;
  }



input[type=range] {
    /*removes default webkit styles*/
    -webkit-appearance: none;
    
    /*fix for FF unable to apply focus style bug */
    border: 1px solid white;
    
    /*required for proper track sizing in FF*/
    width: 100px;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 5px;
    background:rgb(186,198,208);
    border: none;
    border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 15px;
    width: 10px;
    border-radius: 50%;
/*    background: #2c659a;*/
    margin-top: -5px;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}

input[type=range]::-moz-range-track {
/*    width: 300px;*/
    height: 5px;
    background:rgb(186,198,208);
    border: none;
    border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
    border: none;
    height: 15px;
    width: 10px;
    border-radius: 50%;
/*    background: #2c659a;*/
}

/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
    outline: 1px solid white;
    outline-offset: -1px;
}

input[type=range]::-ms-track {
    width: 300px;
    height: 5px;
    
    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;
    
    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;

    /*remove default tick marks*/
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: #777;
    border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
    background:rgb(186,198,208);
    border-radius: 10px;
}
input[type=range]::-ms-thumb {
    border: none;
    height: 15px;
    width: 10px;
    border-radius: 50%;
/*    background: #2c659a;*/
}
input[type=range]:focus::-ms-fill-lower {
    background: #888;
}
input[type=range]:focus::-ms-fill-upper {
    background: #ccc;
}