body {-webkit-text-size-adjust:none;}
header,footer, nav, section {display:block;}

a:link, a:visited{font-size:14px; color:#0000EE; text-decoration:none; font-family:calibri, arial, sans-serif, helvetica;}
a:hover, a:focus, a:active{color:#681664; text-decoration:underline;}

html, body{margin:0; padding:0; width:100%; height:100%;}
body {background-color:#007d85; font-family:calibri, arial, sans-serif, helvetica; color:#333; padding-top:15px; padding-left:15px; padding-right:15px; box-sizing:border-box; overflow:hidden;}

body {
  min-height: calc(100% + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.top0{top:0%;}
.left0{left:0%;}
.right0{right:0%;}
.bottom0{bottom:0%;}

.poFi{position:fixed;}


body.home{background-color:#fff;}

input[type="text"], input[type="button"] {width:50%; height:30px;}
div{overflow:hidden; box-sizing:border-box;}
h1, h2{margin-top:0px;}
img{border:0px;}

.left, .right{float:left; width:50%;}

.diNo{display:none;}
.cuPo{cursor:pointer;}


.fl{float:left;}
.w100{width:100%!important;}
.w80{width:80%!important;}
         h1{
                 position:relative; z-index:2;
                 font-size:40px;
                 text-shadow: 2px 1px 0px rgba(0, 0, 0, 1);
                 text-border:1px solid #fff;
                 /*text-shadow: rgb(255, 255, 255) 1px 1px 1px;*/
                 margin:0px;
                 }

.colorHamaVision{color:#007d85;}
.colorWhite{color:#fff;}

.paTo25{padding-top:25px;}
.paLe25{padding-left:25px;}
.paRi25{padding-right:25px;}
.paBo25{padding-bottom:25px;}

.paTo25{padding-top:25px;}
.paLe25{padding-left:25px;}
.paRi25{padding-right:25px;}
.paBo25{padding-bottom:25px;}

.maTo25{margin-top:25px;}
.maBo25{margin-bottom:25px;}

.mt10p{margin-top:10%;}
.ml10p{margin-left:10%;}
.mr10p{margin-right:10%;}
.mb10p{margin-bottom:10%;}

.paTo25px{padding-top:25px;}
.paLe25px{padding-left:25px;}
.paRi25px{padding-right:25px;}
.paBo25px{padding-bottom:25px;}

.mt15{margin-top:15px;}
.mb15{margin-bottom:15px;}


.backgroundwAPPStore{background:#0782de;}

#installButtonPWABox {z-index:999; background:#f4f4f4; -webkit-box-shadow: 5px 5px 10px 0px rgba(204,204,204,0.75);-moz-box-shadow: 5px 5px 10px 0px rgba(204,204,204,0.75);-o-box-shadow: 5px 5px 10px 0px rgba(204,204,204,0.75);box-shadow: 5px 5px 10px 0px rgba(204,204,204,0.75);}
#installButtonPWABox a:link, #installButtonPWABox a:visited{color:#ffffff;}
#installButtonPWABox a:hover, #installButtonPWABox a:focus, #installButtonPWABox a:active{text-decoration:underline;}



/*===========================================================
                         Slider
===========================================================*/


#slider {width:100%; height:100%; position:relative; z-index:1; box-sizing:border-box; overflow:hidden;}
         #slider img{width:100vw; position:absolute; z-index:2; bottom:0px;}



/*===========================================================
                         Logo
===========================================================*/
         #logo{width:25%;}


/**********************************************************
                 Home
**********************************************************/
#home{width:100%; height:100vh; text-align:center; box-sizing:border-box; padding-top:20vh; font-size:25px;}
#home_img{width:50%; max-width:300px;}
#home_logo{width:50%; max-width:300px;}



/*===========================================================
                         Section
===========================================================*/
#section{
         position:absolute; z-index:5; top:0%; left:0%; text-align:center;
         padding-top:5%; padding-left:20%; padding-right:20%;
         width:100%; height:100vh;
         -webkit-transition: all 1s;
         transition: all 1s;
         -moz-transition: all 1s;
         -o-transition: all 1s;
         //text-shadow: rgb(255, 255, 255) 1px 1px 0px;
         text-shadow: rgb(0, 0, 0) 1px 1px 0px;
         color:#fff;
         font-size:18px;
         overflow-y:scroll;
         }
#section a:link, #section a:visited{font-size:18px; color:#ffffff; text-shadow: rgb(0, 0, 0) 1px 1px 0px;}
#section a:hover, #section a:focus, #section a:active{color:#ffffff; text-decoration:underline;}


.fileinput{
        position: relative;
        z-index:5;
        margin-top:0px;
        }

.faux{
        position: relative;
        top: 0px;
        left: 0px;
        z-index: 5;
        }

input.file{
        position: absolute;
        -moz-opacity:0 ;
        left:0px;
        filter:alpha(opacity: 0);
        opacity: 0;
        z-index: 6;
        height:30px;
        }

/*#uploadInfo{background-color: rgba(0, 0, 0, 0.7); width:100%; padding:15px; box-sizing:border-box;}*/
#uploadBox{background-color: rgba(0, 125, 133, 0.9); width:100%; font-size:16px; line-height:30px;}

#uploadInfo{background-color: rgba(0, 125, 133, 0.9); width:100%; font-size:16px; line-height:30px; display:none; visibility:hidden;}
#uploadInfo a:link, #uploadInfo a:visited{font-size:16px;}


#section input[type="submit"]{width:100%; height:50px;}



/*===========================================================
                         Footer
===========================================================*/

#footer{width:100%; height:15px; position:fixed; z-index:10; bottom:0px; background:#007d85; text-align:right; box-sizing:border-box; padding-right:30px; color:#ffffff; font-size:14px;}

#footer a:link, #footer a:visited{font-size:14px; color:#ffffff; text-decoration:none; font-family:calibri, arial, sans-serif, helvetica;}
#footer a:hover, #footer a:focus, #footer a:active{color:#ffffff; text-decoration:underline;}



@media screen and (max-width:1400px){
         #slider img{ height:100vh; width:auto; position:absolute; z-index:2; bottom:0px;}
         #logo{width:50%;}
}

@media screen and (max-width:1200px){
         #logo{width:50%;}
}


@media screen and (max-width:600px){
         #uploadInfo{overflow-x:scroll;}
}

@media screen and (max-width:600px){
         h1{font-size:28px;}

         #logo{width:75%;}
         #section{padding-top:20%; padding-left:10%; padding-right:10%; padding-bottom:50px;}

         #footer{padding:0px; text-align:center;}
         #footer, #footer a:link, #footer a:visited, #footer a:hover, #footer a:focus, #footer a:active{font-size:11px;}
}

@media screen and (max-width:550px){
         #copyButton{width:100%!important;}
}