.wrapper { width: 40%;min-width: 100%;transform: translate(-50%, -50%); }/*position: absolute;left: 50%;top: 50%;*/
.container { width: 100%;padding: 30px 30px 50px;background-color: white;border-radius: 10px;box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2); }
.container * { font-family: glametrix, Tahoma, Geneva, sans-serif;color: black;font-weight: 500; }   
.skills:not(:last-child) { margin-bottom: 30px; }

.details { width: 100%;display: flex;justify-content: space-between;margin-bottom: 10px; }
.PerStyle { font-family: glametrix, Tahoma, Geneva, sans-serif;color: #000000;font-weight: 500;font-size: 25px; }
.bar { position: relative;border: 2px solid #FFFFFF; }/*0d96e0;border-radius: 20px;*/
.bar div { position: relative;width: 0;height: 9px;background-color: #FFFFFF; }/*border-radius: 10px;*/


/*************** MASK *****************/

#mask {position:absolute;left:0;top:0;z-index:9;width:1380px;background-color:black;display:none; opacity: 0.3;}
#boxes .window {position: absolute;left: 0;top: 150px;right: 0;width: 1350px;height: 200px;display: none;z-index: 99;padding: 20px;border-radius: 15px;}
#boxes #dialog {width:auto;height:auto;padding:5px;background-color:#ffffff;font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;; font-size:19px;}
#popupfoot {font-family: "Segoe UI", sans-serif;font-size: 16pt;padding: 10px 20px;}
#CloseBtn {background-color:#000;COLOR:#ffffff;font-size: 18px;margin-left: 48%;margin-top:20px;cursor:pointer; }

/**************************************/

.step-0-bar { animation: step-0-fill 2s forwards;}
@keyframes step-0-fill { 100% { width: 0%;} }
.step-1-bar { animation: step-1-fill 2s forwards;}
@keyframes step-1-fill { 100% { width: 10%;} }
.step-2-bar { animation: step-2-fill 2s forwards;}
@keyframes step-2-fill { 100% { width: 20%;} }
.step-3-bar { animation: step-3-fill 2s forwards;}
@keyframes step-3-fill { 100% { width: 30%;} }
.step-4-bar { animation: step-4-fill 2s forwards;}
@keyframes step-4-fill { 100% { width: 40%;} }
.step-5-bar { animation: step-5-fill 2s forwards;}
@keyframes step-5-fill { 100% { width: 50%;} }
.step-6-bar { animation: step-6-fill 2s forwards;}
@keyframes step-6-fill { 100% { width: 60%;} }
.step-7-bar { animation: step-7-fill 2s forwards;}
@keyframes step-7-fill { 100% { width: 70%;} }
.step-8-bar { animation: step-8-fill 2s forwards;}
@keyframes step-8-fill { 100% { width: 80%;} }
.step-9-bar { animation: step-9-fill 2s forwards;}
@keyframes step-9-fill { 100% { width: 90%;} }
.step-10-bar { animation: step-10-fill 2s forwards;}
@keyframes step-10-fill { 100% { width: 100%;} }