header{width:100%}header nav{position:absolute;background-color:rgba(255,255,255,0.7);box-shadow:0px 0px 10px rgba(0,0,0,0.16);width:100%;height:85px}header nav #wrappernav{width:100%;max-width:1140px;margin:0 auto;display:flex;justify-content:space-between}header nav h1{position:absolute;top:-9999px;left:-9999px}header nav #logo img{width:100%;max-width:280px;height:auto;margin-top:2%}header nav #loginButton{width:15%;margin-top:3%}header nav #loginButton a{font-family:roboto, sans-serif;font-style:normal;font-weight:400;font-size:1.4em;text-transform:uppercase;background-color:#337AB7;color:white;padding:5% 15%;border-radius:20px;transition-duration:300ms}header nav #loginButton a:hover{text-decoration:none;background-color:#286090}header nav #addUserButton{width:26%;margin-top:3%}header nav #addUserButton a{font-family:roboto, sans-serif;font-style:normal;font-weight:400;font-size:1.4em;text-transform:uppercase;background-color:#1B8947;color:white;padding:3% 8%;border-radius:20px;transition-duration:300ms}header nav #addUserButton a:hover{text-decoration:none;background-color:#0A642E}header nav #menu{width:55%}header nav ul{text-decoration:none;margin-top:5%}header nav ul li{display:inline;font-family:roboto, sans-serif;font-style:normal;font-weight:400;font-size:1.8em}header nav ul li a{color:black;margin:0 1%}header nav ul li .active{font-weight:700}header nav ul .sidemenuBtn{visibility:hidden}header nav #hamburgmenu{display:none}header nav .closebtn{display:none}header img{width:100%;height:auto}@media screen and (max-width: 1024px){header nav{height:75px}header nav #logo img{max-width:230px;margin:3% 0 0 5%}header nav #loginButton{margin-top:2.5%}header nav #loginButton a{font-size:1.4em;padding:4% 13%}header nav #addUserButton{margin-top:2.5%;margin-right:1%}header nav #addUserButton a{font-size:1.4em;padding:2% 6%}header nav ul li{font-size:1.6em}}@media screen and (max-width: 920px){header nav #wrappernav{display:block}header nav #loginButton{display:none}header nav #addUserButton{display:none}header nav #logo img{position:absolute;top:10px;margin:0;right:15px}header nav #menu{height:100%;width:0px;position:fixed;z-index:1;top:0;left:0;background-color:#286090;overflow-x:hidden;transition:0.5s;padding-top:60px}header nav #menu ul{margin-top:0}header nav #menu ul li{display:block;margin-bottom:6%;font-size:1.8em}header nav #menu ul li a{color:rgba(255,255,255,0.856);display:block}header nav #menu ul .sidemenuBtn{width:80%;visibility:visible;margin-top:15%;padding:1% 0;text-align:center;background-color:#337AB7;border:2px solid #D9E7ED;border-radius:20px;box-shadow:0px 0px 5px rgba(0,0,0,0.16)}header nav #menu .closebtn{position:absolute;top:0;right:25px;font-size:3em;margin-left:50px;color:rgba(255,255,255,0.856);display:block}header nav #hamburgmenu{font-size:4em;cursor:pointer;position:absolute;top:0;left:30px;display:block}}@media screen and (max-width: 568px){header img{display:none}header nav #hamburgmenu{font-size:3em;top:0;left:30px}header nav img{display:block}}#wrapper{max-width:1140px;min-height:800px;margin:0 auto}#wrapper h2{font-family:roboto, sans-serif;font-style:normal;font-weight:600;font-size:2.8em;color:#337AB7;text-align:center}#wrapper h3{font-family:roboto, sans-serif;font-style:normal;font-weight:600;font-size:2.4em;color:#337AB7;text-align:center}#wrapper h4{font-family:roboto, sans-serif;font-style:normal;font-weight:400;text-align:center;color:#3B3B3B;font-size:2em}#wrapper #toggle{margin:5% auto 3%;text-align:center}#wrapper .boxToprating{box-shadow:0px 0px 10px rgba(0,0,0,0.16)}@media screen and (max-width: 568px){#wrapper .boxToprating{box-shadow:none;border:2px solid #D9E7ED}}#wrapper #wraptoprate{display:flex;justify-content:space-between;align-items:stretch}#wrapper #beermaster{width:90%;max-width:429px}#wrapper #time{width:90%;max-width:429px}#wrapper #time .strong{font-weight:700}#wrapper #mostTraining{width:90%;max-width:1020px;margin:5% auto}#wrapper .strong{font-weight:700}#wrapper .employee{margin:2% 0 0 5%}#wrapper .employeeimg{max-width:95px;max-height:95px;border-radius:50%;border:1px solid #337AB7;margin-top:2%}#wrapper .beer{width:26px;height:auto}#wrapper #wraptoprate h5{font-family:roboto, sans-serif;font-style:normal;font-weight:400;font-size:1.8em;display:inline;margin:0 0 0 3%}#wrapper #wraptoprate .noData{text-align:center;padding:0 0 5%;margin:2% 0 0 0}#wrapper #wraptoprate h4{padding:4% 0 2%}#wrapper #wraptoprate .positionScore{position:relative;left:155px;top:-35px;max-width:55%}#wrapper h5{font-family:roboto, sans-serif;font-style:normal;font-weight:400;font-size:1.8em}#wrapper strong h5{font-weight:700}#wrapper #mostTraining #trainings{display:flex;justify-content:space-around;padding:0 8%}#wrapper #mostTraining .employee{margin:1% 0% 0 0%;text-align:center}#wrapper #mostTraining .placement{margin:0 auto;display:block;height:30px;width:30px;margin:0 auto 10%}#wrapper #mostTraining .positionScore{position:relative;top:-35px}#wrapper #mostTraining .medalj{margin:0 auto 0%;display:block}#wrapper #mostTraining h5{text-align:center}#wrapper #mostTraining h4{padding-top:2%;margin:2%}#wrapper #mostTraining #fasttrainings{display:flex;justify-content:space-around;padding:0 8% 4%}#wrapper #mostTraining #line{height:1px;width:85%;background-color:#D9E7ED;margin:0 auto}@media screen and (max-width: 1024px){#wrapper{width:95%;margin:0 auto}}@media screen and (max-width: 920px){#wrapper #wraptoprate{display:block}#wrapper #wraptoprate #beermaster{width:100%;max-width:550px;margin:5% auto}#wrapper #wraptoprate #time{width:100%;max-width:550px;margin:5% auto 0}#wrapper #wraptoprate .employee{margin:2% 0 0 17%}#wrapper #mostTraining{width:100%;max-width:550px}#wrapper #mostTraining #trainings,#wrapper #mostTraining #fasttrainings{display:block}#wrapper #mostTraining .employee{margin:2% 0 0 17%;text-align:left}#wrapper #mostTraining .employeeimg{width:95px;height:95px;border-radius:50%;border:1px solid #337AB7}#wrapper #mostTraining h5{font-family:roboto, sans-serif;font-style:normal;font-weight:400;font-size:1.8em;display:inline;margin:0 0 0 3%}#wrapper #mostTraining strong h5{font-weight:700}#wrapper #mostTraining .positionScore{position:relative;left:150px;max-width:55%}#wrapper #mostTraining .medalj{display:inline;margin:0 auto}#wrapper #mostTraining .placement{display:inline;margin:0 auto}}@media screen and (max-width: 568px){#wrapper h2{margin:0;padding:25% 0 0}#wrapper #wraptoprate .employee{margin:2% 0 0 2%}#wrapper #wraptoprate .positionScore{max-width:50%}#wrapper #mostTraining .employee{margin:2% 0 0 -7%}#wrapper #mostTraining .placement{margin:0 3% 0 2%}}@media screen and (max-width: 375px){#wrapper{padding:5% 0 0}}#mypageswrapper{display:flex;justify-content:space-between;align-items:flex-start;margin:8% 0}#headtext{padding-top:10%}@media screen and (max-width: 920px){#headtext h2{padding-top:7%}}@media screen and (max-width: 568px){#headtext h2{padding-top:20%;padding-bottom:3%}}@media screen and (max-width: 375px){#headtext h2{padding-top:25%;padding-bottom:5%}}#goBack{position:relative;top:90px}.formBox{margin:5% auto 20%;padding:3% 3%;width:100%;max-width:550px;box-shadow:0px 0px 10px rgba(0,0,0,0.16)}@media screen and (max-width: 568px){.formBox{box-shadow:none;border:2px solid #D9E7ED}}.formBox h6{font-family:roboto, sans-serif;font-style:normal;font-weight:400;text-align:center;margin:3% 0 0 0;font-size:1.6em}.formBox label{font-family:roboto, sans-serif;font-style:normal;font-weight:400;font-size:1.8em}.formBox .labels{margin:4% 0 0 0}.formBox .input{width:100%;padding:1% 3%;border:1px solid #337AB7;border-radius:15px}.formBox input,.formBox select{font-size:1.3em}.formBox #type{padding:1.5% 2%}.formBox input:focus{background-color:#D9E7ED;outline:none}.formBox select:focus{outline:none}.formBox fieldset{width:100%;text-align:center}.formBox .submitBtn{font-family:roboto, sans-serif;font-style:normal;font-weight:400;font-size:1.5em;padding:2% 6%;margin:4% 0 0;text-align:center;text-transform:uppercase;background-color:#337AB7;color:white;border:none;border-radius:20px;transition-duration:300ms}.formBox #loginBtn:hover{background-color:#286090}.formBox #loginBtn:focus{background-color:#286090;outline:none}.formBox #forgotPassword{text-decoration:underline;float:right;position:relative;top:5px;font-style:italic}.readmoreBtn{font-family:roboto, sans-serif;font-style:normal;font-weight:400;font-size:1.2em;padding:0.8% 2%;width:25%;margin:3% auto 0%;text-align:center;text-transform:uppercase;background-color:#337AB7;color:white;border:none;border-radius:20px;transition-duration:300ms;display:block}.readmoreBtn:hover{text-decoration:none;background-color:#286090;color:white}#traininglog{width:100%;max-width:680px}#traininglog h3{margin:0 0 2%}#traininglog table{width:100%}#traininglog table td,#traininglog table th{border:1px solid #dddddd;text-align:center;padding:8px}#traininglog table tr:nth-child(even){background-color:#EBEBEB}.addTrainingBtn{font-family:roboto, sans-serif;font-style:normal;font-weight:400;position:relative;top:105px;font-size:1.2em;padding:0.5% 2%;text-align:center;text-transform:uppercase;background-color:#1B8947;color:white;border:none;border-radius:20px;transition-duration:300ms}.addTrainingBtn:hover{text-decoration:none;background-color:#0A642E;color:white}#trainingStats{width:100%;max-width:905px;margin:0 auto 10%}#trainingStats h3{margin:0 0 2%}#trainingStats table{width:100%}#trainingStats table td,#trainingStats table th{border:1px solid #dddddd;text-align:center;padding:8px}#trainingStats table tr:nth-child(even){background-color:#EBEBEB}@media screen and (max-width: 1024px){#traininglog{width:60%}}@media screen and (max-width: 920px){#mypageswrapper{display:block}#traininglog{width:90%;max-width:905px;margin:0 auto}#trainingStats{width:90%;max-width:905px}#profileBox{margin:5% auto 0}.readmoreBtn{width:30%}}@media screen and (max-width: 568px){#traininglog{width:100%}#trainingStats{width:100%}.addTrainingBtn{top:95px;padding:1% 4%}.readmoreBtn{width:40%;padding:1% 2%;margin:7% auto 10%}}@media screen and (max-width: 375px){.addTrainingBtn{top:75px;padding:1% 4%}.readmoreBtn{width:60%;padding:1.5% 2%}}#profileBox{box-shadow:0px 0px 10px rgba(0,0,0,0.16);width:100%;max-width:290px;padding:2% 0 2%}@media screen and (max-width: 568px){#profileBox{box-shadow:none;border:2px solid #D9E7ED}}#profileBox .btn{font-family:roboto, sans-serif;font-style:normal;font-weight:400;font-size:1.2em;padding:2% 8%;width:80%;margin:2% auto 0%;text-align:center;text-transform:uppercase;background-color:#337AB7;color:white;border:none;border-radius:20px;transition-duration:300ms;display:block}#profileBox .btn:hover{text-decoration:none;background-color:#286090;color:white}#profileBox img{width:100%;height:auto;max-width:145px;border-radius:50%;border:1px solid #337AB7;display:block;margin:0 auto}#profileBox h5{text-align:center;margin:6%}#profileBox ul{margin-bottom:10%}#profileBox li{font-family:roboto, sans-serif;font-style:normal;font-weight:400;font-weight:700;margin:4% auto;font-size:1.4em;width:50%}#profileBox li i{color:#337AB7}#usercontractLabel{font-size:1.3em;margin-top:2%;margin-left:1%}#usercontractLabel a{text-decoration:underline}.appDescription{font-size:1.4em;text-align:left;padding:3% 0 1% 5%;line-height:1.3em}.appDescUl{font-size:1.2em}.appDescUl li{margin:2%}#qr-code{display:block;margin:3% auto}footer{text-align:center;box-shadow:0px 0px 10px rgba(0,0,0,0.16);padding:1% 0;margin-top:6%}footer img{width:100%;max-width:220px;height:100%;margin:0 0 2% 0}footer i{font-size:2em;margin:1% 1%}@media screen and (max-width: 568px){footer{padding:3% 0}footer i{font-size:2em;margin:2% 3% 5%}}