@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap');
@import url(base.css);
/* =============================================================================
   BASIC
   ========================================================================== */
html, body { height: 100%; }
body{ background: #1c9eb2;}
body, th, td, input { font-family: 'Roboto', sans-serif; font-size: 14px; color: #FFF;}
a { text-decoration: none; }
h1, h2, h3, h4, h5, h6{ font-weight: 400;}
h1 { font-size: 22px; font-family: 'Roboto', sans-serif; margin: 0 0 1em;}
h2 { font-size: 27px; font-family: 'Roboto', sans-serif; margin:0 0 0.6em;}
h3 { font-size: 24px; font-family: 'Roboto', sans-serif; margin:0 0 0.6em;}
h4 { font-size: 20px; font-family: 'Roboto', sans-serif; margin:0 0 0.6em;}
h5 { font-size: 17px; font-family: 'Roboto', sans-serif; margin:0 0 0.6em;}
h6 { font-size: 16px; font-family: 'Roboto', sans-serif; margin:0 0 0.6em;}

::selection {background: #333; color:#FFF;}

p,li { font-size: 13px; line-height: 1.6em; color: #FFF;  }
a:link, a:visited { text-decoration: none; cursor: pointer; color: #FFF;}

.loadbar { position: fixed; background: #FFF; width: 0; height: 4px; top: 0; left: 0; z-index: 2000; overflow: hidden; -webkit-transition: 400ms ease-in-out; -moz-transition: 400ms ease-in-out; -ms-transition: 400ms ease-in-out; -o-transition: 400ms ease-in-out; transition: 400ms ease-in-out; }
.loadbar.ed { width: 0!important; border: none; right: 0; left: inherit; opacity: 0; }

.imgLiquidCenter, .imgLiquidFill{ opacity: 0; 
-webkit-transition: opacity 400ms ease-in-out;
   -moz-transition: opacity 400ms ease-in-out;
  	-ms-transition: opacity 400ms ease-in-out;
     -o-transition: opacity 400ms ease-in-out;
	    	transition: opacity 400ms ease-in-out;
}
.imgLiquid_ready { opacity: 1; }

/*Element*/
.ie { position: fixed; width: 60%; height: 80%; padding: 10% 20%; text-align: center; left: 0; top: 0; background: #CCC; z-index: 9999; }
.ie h2, .ie h4 { color: #333 !important; }
.ie p { text-align: center; color: #333 !important; font-size: 13px; }
.ie a { color: #F36; }


/*Package*/
.inner-width { position: relative; max-width:1200px; margin: auto; }


/*BLOCK*/
#wrapper { position: relative; z-index: 1; width: 100%; margin:auto; top:0; overflow:hidden;}
#header {  position: relative; 
    transition: 300ms ease-in-out;
}
#content { position: relative; text-align: center; color: #FFF;}
#footer { position:relative; color: #FFF; padding: 15px ; overflow: auto; margin: auto; box-sizing: border-box; z-index: 100;}
#footer .copyright{ color: #FFF; font-size: 12px; text-align: center; padding: 10px; box-sizing: border-box; line-height: 30px;}


/**logo**/
.logo { position: relative; text-align: center; padding: 12% 30px 8%;
    transition: 500ms ease-in-out;
}
.logo img { margin: 0 0 20px 0;
    transition: 500ms ease-in-out;
}
.logo h1 { font-size: 32px; font-weight: 700;
}