@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css);@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css);@import url(https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i|Suez+One&display=swap&subset=latin-ext);.loader-wrap{display:flex;justify-content:center;align-items:center;min-height:60vh;margin-left:-50px}@-webkit-keyframes pulse{0%{transform:scaleX(1)}50%{transform:scale3d(.2,.2,.2)}}@keyframes pulse{0%{transform:scaleX(1)}50%{transform:scale3d(.2,.2,.2)}}@-webkit-keyframes pulse2{0%{transform:scaleX(1)}50%{transform:scale3d(0,0,0)}}@keyframes pulse2{0%{transform:scaleX(1)}50%{transform:scale3d(0,0,0)}to{transform:scaleX(1)}}@-webkit-keyframes pulse3{0%{transform:scaleX(1)}50%{transform:scale3d(0,0,0)}90%{transform:scaleX(1)}}@keyframes pulse3{0%{transform:scaleX(1)}50%{transform:scale3d(0,0,0)}90%{transform:scaleX(1)}}.loader-wrap .wrapper{position:relative}.loader-wrap .loading-text{text-align:center;margin-top:70px;position:absolute;display:block;left:0;font-weight:400;text-transform:uppercase;font-size:1.3rem}.loader-wrap .main-loader{position:fixed;transform:translate(0);width:60px;height:60px}.loader-wrap .loader1{width:20px;height:20px;background-color:#000;z-index:9;left:20px;top:20px;-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-delay:0s;animation-delay:0s;transition:transform .4s cubic-bezier(.075,.82,.165,1)}.loader-wrap .loader1,.loader-wrap .loader2{border-radius:50%;float:left;position:absolute;transform-origin:center}.loader-wrap .loader2{width:40px;height:40px;background-color:#ccc;z-index:8;opacity:.7;left:10px;top:10px;-webkit-animation-name:pulse2;animation-name:pulse2;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-delay:.3s;animation-delay:.3s;transition:transform .3s cubic-bezier(.075,.82,.165,1)}.loader-wrap .loader3{width:60px;height:60px;background-color:#222;border-radius:50%;float:left;z-index:7;opacity:.4;position:absolute;left:0;top:0;-webkit-animation-name:pulse3;animation-name:pulse3;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-delay:.5s;animation-delay:.5s;transform-origin:center;transition:transform .2s cubic-bezier(.075,.82,.165,1)}header{height:90px;position:absolute;background-color:hsla(0,0%,100%,.2);background-color:#fff;width:100%;overflow:hidden;color:#222;z-index:3;display:flex;justify-content:space-between;align-items:center;box-shadow:-2px 9px 15px -8px rgba(0,0,0,.36)}header .nav-wrapper{position:relative}header .logo{margin-top:2rem;margin-left:2rem;float:left}header .logo .logo-text{position:relative;width:164px}header .logo .logo-text .cir{position:absolute;z-index:30;width:10px;height:10px;background:#fff;border-radius:50%;top:1.3rem;left:123px}header .logo a{display:inline-block;text-decoration:none;padding:1rem 2rem;cursor:pointer;font-size:2.6rem;font-weight:900}header .logo a .active{color:#fff}header .gray{color:#ccc}header a{color:#222;opacity:.95;transition:all .6s;padding:.5rem 2rem;font-weight:900;cursor:pointer;font-size:1.6rem}header a:hover{opacity:1;color:#c4c4c4}header [aria-current],header a.logo-active .active{color:#fff;background:#000;border-radius:3px}header a.about-active.active{color:#fff;background:#000}header a.cv-active.active{background-color:#3290cc}header a.contact-active.active{background-color:#9dcb48}header a.codepen-active.active{background-color:#c24a98}header a.portfolio-active.active{background-color:#ec8d36}header .fa{display:none;font-size:1rem}header nav{float:right}header nav ul{display:flex}header nav li,header nav ul{justify-content:space-between}header nav li{margin:0 15px;padding-top:3.3rem}header nav li a{text-decoration:none}header nav li a.active{color:#fff;font-weight:900}header nav li.login-tab{background-color:#f6f6f6;width:130px;height:100px;margin:0;color:#222;padding:3rem 0 0}@media only screen and (max-width:768px){header{background-color:hsla(0,0%,100%,0);background:hsla(0,0%,100%,0)!important;padding:0}header nav{float:left;width:100%;margin-top:0}header .logo{padding-left:1.5rem;padding-top:1.6rem!important}}@media only screen and (max-width:768px){header{height:auto;min-height:80px;display:block;position:relative;padding-top:3rem}header .logo{margin:0 0 1rem -.5rem}header .fa{display:inline-block;position:absolute;top:10px;right:10px;cursor:pointer}header ul.collapsed{width:100%;display:flex;flex-direction:column;justify-content:space-between;flex-wrap:wrap;overflow:hidden;max-height:0;transition-duration:.4s;transition-timing-function:cubic-bezier(0,1,.5,1)}header ul.collapsed.is-expanded{overflow:hidden;max-height:500px;transition-duration:.4s;transition-timing-function:ease-in}header ul.collapsed li{padding:15px 10px;margin:0;width:100%}header ul.collapsed li a{color:#000}header ul.collapsed li a.active{color:#fff;font-weight:900}}.roundButton{background-color:#fff;margin-bottom:20px;width:30px;height:30px;border-radius:50%;border:10px solid #000;color:#000;outline:none;padding:5px;text-align:center;display:flex;align-items:center;font-size:1rem;font-weight:900;transition:all .2s cubic-bezier(0,1.26,.8,1.28)}.roundButton:hover{background-color:#ddd;cursor:pointer;border-color:#000;transform:scale(1.2);color:#000}.roundButton:active{border-color:#222;background-color:#000;color:#fff}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}img,object{display:block;border:0;max-width:100%;height:auto}*{-moz-box-sizing:border-box;-webkit-kit-box-sizing:border-box;box-sizing:border-box;-moz-box-sizing:inherit;-webkit-kit-box-sizing:inherit;box-sizing:inherit;-webkit-margin-before:0;-webkit-margin-after:0;-webkit-margin-start:0;-webkit-margin-end:0;margin:0;padding:0;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}html{font-size:62.5%}body{font-family:Nunito,sans-serif;font-size:1.2rem}a{color:#333;padding-bottom:.2rem}a:hover{color:#ccc}h1{margin:0;font-size:6.5rem;top:-25px!important;font-family:Suez One,serif;z-index:500}@media only screen and (max-width:480px){h1{font-size:4rem}}h2{font-size:4.6rem}h2,h3{font-family:Suez One,serif}h3,h4{font-size:3.6rem}h5{font-size:2.6rem}h6{font-size:2rem}body{font-size:2.4rem}.app{position:relative}.content{overflow-x:hidden;position:absolute;width:100%}.Footer{position:fixed;z-index:900;bottom:0;min-height:10vh;background-color:#000;width:100%}.page-block{z-index:1;width:100%;position:absolute;margin-top:90px}@media only screen and (max-width:868px){.page-block{position:relative;display:block;margin-top:90px}}@media only screen and (max-width:768px){.page-block{margin-top:0}}.Playground{min-height:100vh}.colors{background-color:#c24a98;background-color:#9dcb48;background-color:#ec8d36;background-color:#3290cc}.card{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;font-size:3rem}.About{min-height:100vh}.About .page-header{background:#222;padding:5rem 0;color:#fff}.About .header-content{width:80%;margin:0 auto}@media only screen and (max-width:868px){.About .header-content{width:90%}}.About .mast-header{box-shadow:-2px 9px 15px -8px rgba(0,0,0,.36);background-color:#f6f6f6;margin-bottom:0}.About .mast-header h2{font-size:3.1rem;line-height:3.6rem}@media only screen and (max-width:600px){.About .mast-header h2{font-size:2rem;line-height:3rem}}.About .mast-header h2.container{width:80%;margin:0 auto;padding:20px 0}.About .about-container{display:grid;grid-template-columns:3fr 3fr;grid-gap:1rem;width:70%;margin:0 auto}@media only screen and (max-width:768px){.About .about-container{grid-template-columns:1fr;width:90%}}.Admin{min-height:100vh}.Admin .admin-wrap{display:flex;align-items:center;justify-content:center}.Admin .admin-wrap .admin-container{margin-top:0;width:100%;min-height:70vh;padding:6rem 4rem 4rem;box-shadow:2px 6px 15px -8px rgba(0,0,0,.36);position:relative}@media only screen and (max-width:868px){.Admin .admin-wrap .admin-container{width:70%}}.Admin .admin-wrap .admin-buttons{position:absolute;background-color:#222;padding:1rem 0;top:0;width:100%;left:0}.Admin .admin-wrap .admin-buttons a{color:#fff;padding:0 3rem;cursor:pointer;text-decoration:none}.Contact{min-height:100vh}.Contact .page-header{background:#222;background-color:#9dcb48;padding:5rem 0;color:#fff}.Contact .header-content{width:80%;margin:0 auto}@media only screen and (max-width:868px){.Contact .header-content{width:95%}}.Contact .contact-container{width:70%;margin:0 auto;padding-top:60px}@media only screen and (max-width:868px){.Contact .contact-container{width:95%}}.Contact .form-group{position:relative}.Home{min-height:100vh}.Home .Masthead{background-color:#222;box-shadow:-2px 9px 15px -8px rgba(0,0,0,.36);color:#fff;padding:6rem 0}@media only screen and (max-width:868px){.Home .Masthead{padding:2rem 0}}.Home .Masthead .header-content{width:80%;margin:0 auto;display:grid;grid-template-columns:1fr .5fr;grid-gap:2rem}@media only screen and (max-width:868px){.Home .Masthead .header-content{grid-template-columns:1fr;display:flex;flex-direction:column-reverse}.Home .Masthead .header-content .quote{padding-bottom:20px}}.Home .Masthead .header-content h2{padding-top:60px;padding-bottom:20px}@media only screen and (max-width:868px){.Home .Masthead .header-content h2{padding:0 0 20px;font-size:3.6rem}}.Home .Masthead .header-content p{font-size:1.8rem;line-height:3rem}@media only screen and (max-width:868px){.Home .Masthead .header-content p{padding:0;font-size:1.5rem}}.Home .Masthead .img-bg img{width:60%;border-radius:50%;border:20px solid #fff}@media only screen and (max-width:868px){.Home .Masthead .img-bg img{margin:0 auto}}@media only screen and (max-width:360px){.Home .Masthead .img-bg img{min-height:100px}}.Home .Masthead img{width:60%;border-radius:50%;border:20px solid #fff}.Home .home-container{width:80%;margin:0 auto;display:grid;grid-gap:1rem;grid-template-columns:repeat(auto-fit,minmax(500px,1fr))}@media only screen and (max-width:600px){.Home .home-container{width:100%;grid-template-columns:1fr}.Home .home-container .cv-latest,.Home .home-container .port-latest{box-shadow:-2px 9px 15px -8px rgba(0,0,0,.36)}.Home .home-container .cv-latest div.cv-inner,.Home .home-container .port-latest div.cv-inner{width:80%;margin:0 auto}}@media only screen and (max-width:600px)and (max-width:600px){.Home .home-container .cv-latest div.cv-inner,.Home .home-container .port-latest div.cv-inner{width:90%}}.Home .cv-latest,.Home .port-latest{padding-top:60px}.Home .port-latest div.port-inner{width:100%;margin:0 auto}@media only screen and (max-width:600px){.Home .port-latest div.port-inner{width:90%}}.Home .port-latest .port-job{padding-top:20px;display:grid;grid-template-columns:1fr 1fr;grid-gap:1.5rem}@media only screen and (max-width:600px){.Home .port-latest .port-job{grid-template-columns:1fr;padding-bottom:60px}}.Home .port-latest .port-job .port-info a{font-size:1.3rem}.Home .port-latest .port-job .port-info h3{display:block;padding-bottom:10px;font-size:3rem}@media only screen and (max-width:600px){.Home .port-latest .port-job .port-info h3{padding-top:20px;font-size:2.4rem}}.Home .port-latest .port-job .port-info img{height:130px}@media only screen and (max-width:868px){.Home .port-latest .port-job .port-info img{height:100%;width:100%}}.Home .port-latest .port-job .port-info .tags{font-size:1.3rem;display:flex;flex-direction:row;flex-wrap:wrap}.Home .port-latest .port-job .port-info .tags li{background:#222;color:#fff;padding:5px 10px;margin-right:6px;border-radius:3px;margin-bottom:10px}.Home .cv-job{display:grid;grid-template-columns:.8fr 2fr}@media only screen and (max-width:600px){.Home .cv-job{padding-bottom:60px}}.Home .cv-job .cv-info{padding-top:45px}@media only screen and (max-width:600px){.Home .cv-job .cv-info{padding-top:35px}}.Home .cv-job .cv-info h6{font-family:Suez One,serif;font-size:3rem}@media only screen and (max-width:600px){.Home .cv-job .cv-info h6{font-size:2.4rem}}.Home .cv-job .cv-info p{font-size:1.8rem;font-weight:100;text-transform:uppercase}.Codepen,.CodeSingle{min-height:100vh}.Codepen .page-header,.CodeSingle .page-header{background:#222;background-color:#c24a98;padding:5rem 0;color:#fff}.Codepen .codepen-content,.CodeSingle .codepen-content{width:80%;margin:0 auto}@media only screen and (max-width:600px){.Codepen .codepen-content,.CodeSingle .codepen-content{width:100%}}.Codepen .codepen-block,.CodeSingle .codepen-block{float:right}.Codepen .codepen-block i,.CodeSingle .codepen-block i{font-weight:900}.Codepen .codepen-block a,.CodeSingle .codepen-block a{background-color:#c24a98;padding:5px 30px;margin-left:15px;border-radius:0 0 3px 3px;cursor:pointer;color:#fff;font-size:1.7rem;font-weight:900;text-decoration:none}@media only screen and (max-width:600px){.Codepen .codepen-block a,.CodeSingle .codepen-block a{display:block;position:relative;width:100%;margin:0;border-radius:0;padding-top:20px;padding-bottom:20px}}@media only screen and (max-width:600px){.Codepen .codepen-block,.CodeSingle .codepen-block{width:100%;float:left}}.Codepen .header-content,.CodeSingle .header-content{width:80%;margin:0 auto;position:relative}@media only screen and (max-width:868px){.Codepen .header-content,.CodeSingle .header-content{width:95%}}.Codepen .header-content .codepen-single-title,.CodeSingle .header-content .codepen-single-title{position:absolute;margin-left:20px;font-size:3.2rem;right:0;bottom:-60px;background-color:#fff;color:#222;padding:10px 50px}@media only screen and (max-width:768px){.Codepen .header-content .codepen-single-title,.CodeSingle .header-content .codepen-single-title{font-size:1.6rem}}.Codepen .codepen-wrapper,.CodeSingle .codepen-wrapper{display:grid;grid-gap:3rem;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));width:80%;margin:0 auto;padding-top:5rem;padding-bottom:60px}@media only screen and (max-width:868px){.Codepen .codepen-wrapper,.CodeSingle .codepen-wrapper{width:100%}}.Codepen .codepen-info,.CodeSingle .codepen-info{border:20px solid #fefefe;border-radius:6px;box-shadow:-2px 9px 15px -8px rgba(0,0,0,.36);min-height:170px}.Codepen .codepen-info:hover,.CodeSingle .codepen-info:hover{border:20px solid #d298c1;cursor:pointer}.Codepen .codepen-area,.CodeSingle .codepen-area{padding-top:30px;display:grid;grid-template-columns:1.6fr 1fr}@media only screen and (max-width:768px){.Codepen .codepen-area,.CodeSingle .codepen-area{grid-template-columns:1fr}}.Codepen .codepen-area .tags,.CodeSingle .codepen-area .tags{padding-top:10px;font-size:1.4rem;display:flex;flex-direction:row;flex-wrap:wrap}.Codepen .codepen-area .tags li,.CodeSingle .codepen-area .tags li{background:#222;color:#fff;padding:5px 10px;margin-right:6px;margin-bottom:10px;border-radius:4px}.Cv{min-height:100vh}.Cv .page-header{background:#222;background-color:#3290cc;padding:5rem 0;color:#fff}.Cv .header-content{width:80%;margin:0 auto}@media only screen and (max-width:868px){.Cv .header-content{width:90%}}.Cv .cv-content{width:80%;margin:0 auto}@media only screen and (max-width:868px){.Cv .cv-content{width:90%}}.Cv .cv-area .cv-block{float:right}.Cv .cv-area .cv-block .error,.Cv .cv-area .cv-block .loading{background-color:#3290cc;color:#fff;padding:10px 20px;border-radius:3px;font-weight:800;font-size:2rem}.Cv .cv-area .cv-block .error{color:pink}.Cv .cv-area .cv-block i{font-weight:900}.Cv .cv-area .cv-block a{background-color:#3290cc;padding:5px 30px;margin-left:15px;border-radius:0 0 3px 3px;cursor:pointer;color:#fff;font-size:1.7rem;font-weight:900;text-decoration:none}.Cv .cv-area .cv-zone{margin:0 auto;width:80%;display:grid;grid-gap:5rem;grid-template-columns:3fr 4fr}@media only screen and (max-width:868px){.Cv .cv-area .cv-zone{grid-template-columns:1fr;grid-gap:2rem}}.Cv .cv-area .cv-job{padding:10rem 0;box-shadow:-2px 9px 15px -8px rgba(0,0,0,.36)}.Cv .cv-area .cv-job .company-section{text-align:right}.Cv .cv-area .cv-job .company-section img{text-align:right;display:inline;border-radius:50%;border:10px solid #000;padding:10px}.Cv .cv-area .cv-job .company-section h2{padding:2rem 0;font-size:4rem}.Cv .cv-area .cv-job .company-section a{font-size:1.8rem}.Cv .cv-area .cv-job .company-section h3{padding-top:1rem;padding-bottom:2rem;font-size:1.6rem;font-weight:900}.Cv .cv-area .cv-job .company-section h4{padding-bottom:20px}.Cv .cv-area .cv-job .details-section{padding-top:8rem}@media only screen and (max-width:868px){.Cv .cv-area .cv-job .details-section{padding-top:1rem}}.Cv .cv-area .cv-job .details-section p{font-size:1.9rem;font-weight:900;padding:1rem 0}.Cv .cv-area .cv-job .details-section .detail-list{font-size:1.8rem}.Cv .cv-area .cv-job .details-section .detail-list li{padding-bottom:1rem;list-style-type:disc}.Cv .cv-area .cv-job .details-section .tags{padding-top:10px;font-size:1.4rem;display:flex;flex-direction:row;flex-wrap:wrap}.Cv .cv-area .cv-job .details-section .tags li{background:#222;color:#fff;padding:5px 10px;margin-right:6px;margin-bottom:10px;border-radius:3px}.CvPage{min-height:100vh}.CvPage .container{width:76%;margin:0 auto}.CvPage .header-block{background:#0b8cd2}.Portfolio,.PortSingle{min-height:100vh}.Portfolio .page-header,.PortSingle .page-header{background:#222;background-color:#ec8d36;padding:5rem 0;color:#fff}.Portfolio .header-content,.PortSingle .header-content{width:80%;margin:0 auto;position:relative}@media only screen and (max-width:868px){.Portfolio .header-content,.PortSingle .header-content{width:95%}}.Portfolio .header-content .port-single-title,.PortSingle .header-content .port-single-title{position:absolute;margin-left:20px;font-size:3.2rem;right:0;bottom:-60px;background-color:#fff;border-radius:3px;color:#222;padding:10px 50px}@media only screen and (max-width:600px){.Portfolio .header-content .port-single-title,.PortSingle .header-content .port-single-title{font-size:2rem}}.Portfolio .port-navigation .react-tabs__tab-list,.PortSingle .port-navigation .react-tabs__tab-list{float:right;display:flex;flex-direction:row;flex-wrap:wrap}.Portfolio .port-navigation .react-tabs__tab,.Portfolio .port-navigation a,.PortSingle .port-navigation .react-tabs__tab,.PortSingle .port-navigation a{background-color:#ec8d36;padding:5px 30px;margin-left:5px;border-radius:0 0 3px 3px;cursor:pointer;color:#fff;font-size:1.7rem;font-weight:900}.Portfolio .port-navigation .react-tabs__tab--selected,.PortSingle .port-navigation .react-tabs__tab--selected{color:#222}.Portfolio .port-section,.PortSingle .port-section{display:grid;grid-gap:3rem;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));width:80%;margin:0 auto;padding-top:5rem;padding-bottom:60px}@media only screen and (max-width:868px){.Portfolio .port-section,.PortSingle .port-section{width:100%}}.Portfolio .port-list,.PortSingle .port-list{border:20px solid #fefefe;box-shadow:-2px 9px 15px -8px rgba(0,0,0,.36);min-height:158px}.Portfolio .port-list:hover,.PortSingle .port-list:hover{border:20px solid #ffd387;cursor:pointer}.Portfolio .port-single,.PortSingle .port-single{padding-top:600px}.Portfolio .port-client h5,.PortSingle .port-client h5{position:relative;overflow:hidden}.Portfolio .port-client h5 span,.PortSingle .port-client h5 span{position:absolute;background:#000;color:#fff;padding:2rem;font-size:1.5rem;bottom:0;right:0;left:0;width:100%}.Error{min-height:100vh;color:gold}.Error .page-header{background-color:#cd5c5c;padding:5rem 0;color:#fff}.Error .container{width:76%;margin:0 auto}.Error h1{display:grid;grid-template-columns:.5fr 2fr}@media only screen and (max-width:680px){.Error h1{grid-template-columns:1fr}}.Error h1 .error-1{background-color:#cd5c5c;color:#fff;display:flex;justify-content:space-evenly;align-self:center;padding:0 2rem 3rem;font-size:12rem;transform:rotate(-90deg)}@media only screen and (max-width:680px){.Error h1 .error-1{transform:rotate(0deg)}}.Error h1 .error-2{color:#000}.Examples{padding-top:100px}.Examples .header{min-height:87.2vh;display:grid;justify-content:center;align-items:center;align-content:center;color:#fff;background:#444}.Examples .header hgroup{background:#ff0;padding:.1rem}.Examples .header hgroup h1{background:#444;max-width:100%;padding-bottom:1rem;border-bottom:2rem solid #fff;margin-bottom:1rem}.Examples .header hgroup h5{text-align:right}.Examples .grid-1{min-height:100vh;background:#ff0}.Examples .grid-1 .grid-wrap{display:grid;grid-gap:1rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.Examples .grid-1 .grid-wrap .card{background:green}.Examples .grid-2{min-height:100vh;background:#fff}.Examples .grid-3{min-height:100vh;background:tomato}.Examples .grid-4{min-height:100vh;background:#444}.About,.Admin,.Codepen,.Contact,.Cv,.Error,.Freelance,.Home,.Personal,.porfolio-section,.port-title,.Portfolio,.PortfolioSingle,.Skills{animation:fadein 1s;-moz-animation:fadein 1s;-webkit-animation:fadein 1s;-o-animation:fadein 1s}@keyframes fadein{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadein{0%{opacity:0}to{opacity:1}}