html{padding:0;margin:0;}
img{width:100%;display:block;}
body{padding:0;margin:0;background:#43464d;font-family:'Josefin Slab', serif;}
p{font-family:'Open Sans', sans-serif;font-size:14px;}
.status{position:fixed;top:0;left:0;background:#ffffff;color:#000000;padding:20px;}
.clear{clear:both;}
.ionko-global-wrapper{width:60%;margin:auto;overflow:hidden;box-shadow:-54px 66px 256px 36px rgba(0,0,0,0.75);display:flex;position:relative;z-index:10;}
.ionko-left-col-wrapper{position:relative;float:left;width:calc(30% - 1px);background:#2e2d32;border-right:#19181d 1px solid;transition:all .3s;}
.left-col-floater{position:fixed;width:100%;max-width:18%;transition:all .3s;}
.left-col-floater.fixed{bottom:65px;transition:all .3s;}
.ionko-right-col-wrapper{float:left;padding:20px;width:calc(70% - 40px);background:#fafafa;}
.text-highlight{color:#3d85c6;}
.left-col-copy-wrapper{color:#d6d6d6;font-size:18px;}
.first-name{font-size:2vw;}
.last-name{font-size:2.4vw;font-weight:600;position:relative;z-index:9}
.ionko-profile-pohoto{background:#a2a2a4;position:relative;}
.ionko-profile-pohoto img{filter:drop-shadow(28px 21px 1px rgba(0,0,0,0.7)) contrast(1.2);animation:1.5s ease-out 0s 1 bodyShadow;animation-fill-mode:forwards;}
.ionko-profile-pohoto:hover img{}
.text-center{text-align:center;}
.text-dark{color:#313131;}
.title{color:#3d85c6;font-size:1.4vw;font-weight:600;}
#box{-webkit-animation:testanimation 5s infinite;-moz-animation:testanimation 5s infinite;-o-animation:testanimation 5s infinite;animation:testanimation 5s infinite;}
@-webkit-keyframes testanimation{0%{box-shadow:-54px 66px 256px 36px rgba(0,0,0,0.75);}
20%{box-shadow:-54px 66px 256px 36px rgba(107,196,2,0.75);}
40%{box-shadow:-54px 66px 256px 36px rgba(107,196,2,0.75);}
60%{box-shadow:-54px 66px 256px 36px rgba(255,1,1,0.75);}
80%{box-shadow:-54px 66px 256px 36px rgba(1,156,255,0.75);}
100%{box-shadow:-54px 66px 256px 36px rgba(0,0,0,0.75);}
}
.skillBoxWrapper{;padding:0px 0px 0px 0px;border:#dcdcdc 1px solid;background:#eeeeee;margin:10px 0px 10px 0px;font-size:110%;font-weight:400;position:relative;border-radius:4px;}
.skillTitle{position:relative;z-index:9;width:35%;height:100%;padding:6px 0px 6px 20px;background:rgba(61,133,198, 0.9);color:#ffffff;    font-size: 16px;}
.skillLevel{background:#468fd1;position:absolute;top:0px;left:0;width:50%;height:calc(100% - 20px);display:block;z-index:8;text-align:right;color:#ffffff;padding:8px 0px 12px 0px;}
.ionko-skills.supportive .skillBoxWrapper{width:calc(48% - 20px);float:left;}
.ionko-skills.supportive .skillBoxWrapper:nth-child(2n+1){margin:10px 20px 10px 0px;float:right;}
.ionko-skills.supportive .skillBoxWrapper .skillTitle{width:calc(100% - 20px);background:#eeeeee;padding:6px 0px 6px 20px;color:#000000;}
.skillBoxWrapper.html .skillLevel{width:0%;animation:3s ease-out 0s 1 fillSkillsHTML;animation-fill-mode:forwards;}
.skillBoxWrapper.css .skillLevel{width:0%;animation:3s ease-out .1s 1 fillSkillsCSS;animation-fill-mode:forwards;}
.skillBoxWrapper.responsive .skillLevel{width:0%;animation:3s ease-out .2s 1 fillSkillsResponsiveQ;animation-fill-mode:forwards;}
.skillBoxWrapper.jquery .skillLevel{width:0%;animation:3s ease-out .3s 1 fillSkillsJQ;animation-fill-mode:forwards;}
.skillBoxWrapper.prototyping .skillLevel{width:0%;animation:3s ease-out .4s 1 fillSkillsprodotyping;animation-fill-mode:forwards;}
.skillBoxWrapper.javascript .skillLevel{width:0%;animation:3s ease-out .5s 1 fillSkillsJavascript;animation-fill-mode:forwards;}
.skillBoxWrapper.uxui .skillLevel{width:0%;animation:3s ease-out .5s 1 fillSkillsuxui;animation-fill-mode:forwards;}
.skillBoxWrapper.cmsadmin .skillLevel{width:0%;animation:3s ease-out .5s 1 fillSkillscmsadmin;animation-fill-mode:forwards;}
.ionko-form-style{font:95% Arial, Helvetica, sans-serif;max-width:640px;}
.ionko-form-style h1{background:#3d85c6;padding:20px 0;font-size:140%;font-weight:300;text-align:center;color:#fff;margin:0px 0px 4% 0px;}
.ionko-form-style input[type="text"],
.ionko-form-style input[type="date"],
.ionko-form-style input[type="datetime"],
.ionko-form-style input[type="email"],
.ionko-form-style input[type="number"],
.ionko-form-style input[type="search"],
.ionko-form-style input[type="time"],
.ionko-form-style input[type="url"],
.ionko-form-style textarea,
.ionko-form-style select{-webkit-transition:all 0.30s ease-in-out;-moz-transition:all 0.30s ease-in-out;-ms-transition:all 0.30s ease-in-out;-o-transition:all 0.30s ease-in-out;outline:none;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;width:100%;background:#fff;margin-bottom:4%;border:1px solid #ccc;padding:3%;color:#555;font:95% Arial, Helvetica, sans-serif;display:block;transition:all .5s;}
.ionko-form-style textarea.adjust{}
.ionko-form-style input[type="text"]:focus,
.ionko-form-style input[type="date"]:focus,
.ionko-form-style input[type="datetime"]:focus,
.ionko-form-style input[type="email"]:focus,
.ionko-form-style input[type="number"]:focus,
.ionko-form-style input[type="search"]:focus,
.ionko-form-style input[type="time"]:focus,
.ionko-form-style input[type="url"]:focus,
.ionko-form-style textarea:focus,
.ionko-form-style select:focus{padding:3%;border:1px solid #3d85c6;-webkit-box-shadow:inset -6px -54px 226px -27px rgba(205,228,247,1);-moz-box-shadow:inset -6px -54px 226px -27px rgba(205,228,247,1);box-shadow:inset -6px -54px 226px -27px rgba(205,228,247,1);}
.ionko-form-style input[type="submit"],
.ionko-form-style input[type="button"]{box-sizing:border-box;width:100%;padding:16px 0;background:#3d85c6;border-bottom:2px solid #205687;border-top-style:none;border-right-style:none;border-left-style:none;color:#fff;cursor:pointer;font-size:100%;font-family:'Josefin Slab', serif;transition:all .5s;}
.ionko-form-style input[type="submit"]:hover,
.ionko-form-style input[type="button"]:hover{background:#2a6090;}
.experience{width:calc(100% - 40px);padding:20px;background:#eeeeee;border:#dcdcdc 1px solid;float:left;}
.company{font-family:'Open Sans', sans-serif;}
.company-logo{width:calc(30% - 40px);padding:0px;height:100%;float:left;}
.company-details-wrapper{width:70%;float:right;}
.company-logo .helper img{}
.company-name{background:#3d85c7;padding:6px 0px 6px 20px;border-radius:4px;margin-bottom:10px;color:#ffffff;}
.company-title{font-weight:bold;background:#fafafa;padding:6px 0px 6px 20px;color:#000000;border:#dcdcdc 1px solid;border-radius:4px;}
.footer{width:100%;height:20px;background:#2e2d32;color:#ffffff;text-align:center;padding:18px 0px 18px 0px;border-top:#3d85c6 5px solid;position:relative;z-index:11;font-size:small;}
#form-messages{position:absolute;width:calc(100% - 15px);padding:5px 5px 20px 10px;display:none;bottom:0px;background:rgba(47, 45, 50, 0.65);font-family:'Open Sans', sans-serif;}
#form-messages.error{color:rgb(255, 135, 62);}
#form-messages.success{color:rgb(123, 228, 60);}
@keyframes bodyShadow{0%{filter:drop-shadow(-42px -40px 55px rgba(0,0,0,0.2)) contrast(1.2);}
100%{filter:drop-shadow(19px 13px 14px rgba(0,0,0,0.7)) contrast(1.2);}
}
@keyframes fillSkillsHTML{0%{width:0%;}
100%{width:98%;}
}
@keyframes fillSkillsCSS{0%{width:0%;}
100%{width:98%;}
}
@keyframes fillSkillsResponsiveQ{0%{width:0%;}
100%{width:95%;}
}
@keyframes fillSkillsJQ{0%{width:0%;}
100%{width:94%;}
}
@keyframes fillSkillsprodotyping{0%{width:0%;}
100%{width:94%;}
}@keyframes fillSkillsJavascript{0%{width:0%;}
100%{width:92%;}
}
@keyframes fillSkillsuxui{0%{width:0%;}
100%{width:90%;}
}@keyframes fillSkillscmsadmin{0%{width:0%;}
100%{width:80%;}
}
@media (max-width:980px){.ionko-global-wrapper{width:100%;}
.left-col-floater{max-width:30%;}
.ionko-profile-pohoto{max-height:300px;overflow:hidden;}
}
@media (max-width:640px){.ionko-global-wrapper{display:block;}
.ionko-right-col-wrapper{width:calc(100% - 40px);}
.ionko-left-col-wrapper{width:100%;}
.left-col-floater{position:relative;max-width:100%;}
.ionko-profile-pohoto{max-height:320px;overflow:hidden;}
.first-name{font-size:12vw;}
.last-name{font-size:12vw;}
.title{font-size:4.4vw;}
.skillTitle{width:68%;}
.ionko-skills.supportive .skillBoxWrapper{width:calc(100% - 20px);}
.company-logo{width:calc(50% - 40px);margin-left:auto;margin-right:auto;margin-bottom:20px;float:none;text-align:center;}
.company-details-wrapper{width:100%;float:none;}
}