@import url(https://fonts.googleapis.com/css?family=Dosis:400,700);
*{font-family:"Dosis";}

html{margin:0;padding:0;}
body{margin:0;padding:0;}
a{text-decoration:none;}
form{margin:1%;padding:1%;width:98%;}
fieldset{margin:2% auto;padding:2%;background:rgba(255,255,255,.9);border-radius:7px;border:1px solid rgba(255,255,255,.9);}
legend{margin:0 2%;padding:1%;background:rgba(255,255,255,.9);border-radius:7px;}

.ini{margin:0;padding:0;width:20%;height:100vh;position:relative;z-index:9;float:left;background:rgba(0,0,0,.9);}
.ini_inn{margin:0;padding:0;width:100%;height:100vh;box-shadow:0 2px 10px rgba(0,0,0,.15);}
.lgo{margin:0;padding:0;width:100%;height:100vh;display:table-cell;vertical-align:middle;}
.lgo_inn{margin:0;padding:auto;width:100%;text-align:center;}
.lgo_inn img{margin:auto;max-width:80%;}
.wrp{margin:0;padding:0;width:80%;max-width:80%;height:100vh;float:left;overflow:hidden;background:rgba(255,255,255,.9);}
.wrp_inn{margin:0;padding:2%;width:96%;height:100vh;}
.wrp h2{margin:.5%;padding:.5%;text-align:right;text-overflow:clip;font-size:20px;text-transform:uppercase;margin-bottom:2%;top:5%;color:#333333;}
.wrp p{margin:.5%;padding:.5%;text-align:right;color:#444444;font-size:80%;}
.icn{float:left;margin:1em;padding:1em;width:11em;height:7em;text-align:center;border-radius:7px;box-shadow:rgba(17, 17, 26, 0.1) 0px 1px 0px,rgba(17, 17, 26, 0.1) 0px 8px 24px,rgba(17, 17, 26, 0.1) 0px 16px 48px;}
.icn:hover{background:rgba(0,0,0,.1);}
.icn>a{color:#777777;}
.btn{margin:1% 0;padding:1% 4%;background:rgba(46,204,113,.55);border:1px rgba(46,204,113,.95);border-radius:7px;}

.extranet{margin:0;width:80%;max-width:80%;height:100vh;float:left;overflow:hidden;}
.extranet ul{margin:0;padding:0;width:100%;display:table;table-layout:fixed;}
.extranet ul li{width:20%;height:100vh;display:table-cell;vertical-align:middle;position:relative;background-repeat:no-repeat;background-position:center center;transition:all 1s ease;}
.extranet ul li div{padding:10%;width:100%;height:80vh;overflow:hidden;display:block;z-index:3;vertical-align:bottom;box-sizing:border-box;transition:all 1s ease;}
.extranet ul li div h2{margin:3em 0;height:20vh;line-height:20vh;text-overflow:clip;color:#FFFFFF;text-transform:uppercase;opacity:1;-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg);-webkit-transition:all 1s ease;transition:all 1s ease;}
.extranet ul li div h2 a{color:#FFFFFF;}
.extranet ul li div p{margin:1%;width:98%;color:#FFFFFF;opacity:0;text-overflow:ellipsis;position:relative;z-index:5;white-space:nowrap;overflow:hidden;-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);-o-transform:translateX(-20px);transform:translateX(-20px);-webkit-transition:all 400ms ease;transition:all 1s ease;}
.extranet ul li div p a{color:#FFFFFF;}
.extranet ul:hover li{width:8%; }
.extranet ul:hover li:hover{width:60%;}
.extranet ul:hover li:hover {background:rgba(0,0,0,0.4);}
.extranet ul:hover li:hover *{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);}
.extranet ul:hover li:hover h2{height:10vh;}

.x{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.fld{float:left;position:relative;width:17em;min-height:4em;margin:.25em;padding:0;-ms-box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
.fld>label{position:absolute;margin:0;padding:0;top:.9em;left:.5em;transition:all 200ms;opacity:1;z-index:99;margin-top:.5em;font-size:80%;transform:translate3d(0,-100%,0);}
.fld>input,.fld>select{margin:0;padding:.5em;width:100%;height:4em;line-height:4em;border:1px solid rgba(0,0,0,.35);border-radius:4px;z-index:0;-ms-box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
.fld>input[type="number"]::-webkit-outer-spin-button,.fld>input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.fld>input[type="number"]{-moz-appearance:textfield;}
.fld>input[type="checkbox"]{-webkit-appearance:checkbox;-moz-appearance:checkbox;appearance:checkbox;width:1em;height:1em;float:left;margin-top:1.4em;}
.fld>input[type="radio"]{-webkit-appearance:radio;-moz-appearance:radio;appearance:radio;width:2em;height:2em;float:left;margin-top:1.4em;}
.fld>textarea{margin:0;padding:1em .5em .5em .5em;width:100%;min-height:4em;border:1px solid rgba(0,0,0,.35);border-radius:4px;z-index:0;-ms-box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
.fld>input:hover,.fld>select:hover,.fld>textarea:hover{box-shadow:0 0 10px 0 rgba(0,0,0,.29);}
.fld>input:focus,.fld>select:focus,.fld>textarea:focus{border:1px solid rgba(0,0,0,.55);}
.fld>input:disabled,.fld>select:disabled,.fld>textarea:disabled{background:rgba(0,0,0,.15);}
.fld>input:disabled + label,.fld>select:disabled + label,.fld>textarea:disabled + label{margin-top:.5em;font-size:70%;transform:translate3d(0,-100%,0);}
.fld>input:invalid,.fld>select:invalid,.fld>textarea:invalid{border:1px solid #ff0000;}
.wid{width:34.5em;}
.lit{width:20%;}
.len{width:96%;}
.fld>a{position:absolute;top:1em;right:.5em;}
.fld>button{position:absolute;top:0;right:.5em;}

.yyy{overflow-y:auto;scrollbar-color:#BBBBBB #F5F5F5;scrollbar-width:thin;}
.yyy::-webkit-scrollbar{width:6px;background:#F5F5F5;}
.yyy::-webkit-scrollbar-track{background:#F5F5F5;border:0;}
.yyy::-webkit-scrollbar-thumb{background:#BBBBBB;}

.xxx{overflow-x:auto;scrollbar-color:#BBBBBB #F5F5F5;scrollbar-width:thin;}
.xxx::-webkit-scrollbar{width:6px;background:#F5F5F5;}
.xxx::-webkit-scrollbar-track{background:#F5F5F5;border:0;}
.xxx::-webkit-scrollbar-thumb{background:#BBBBBB;}

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

	.ini{width:100%;max-width:100%;height:100vh;}
	.wrp{width:100%;max-width:100%;height:auto;}

	.extranet{width:100%;max-width:100%;height:auto;}
	.extranet ul li,
	.extranet ul li:hover,
	.extranet ul:hover li,
	.extranet ul:hover li:hover{width:100%;position:relative;display:table;table-layout:fixed;}
	.extranet ul:hover li:hover *{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);}
	.extranet ul li div h2{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);}
}