/*
Theme Name:Webfeya
Text Domain:webfeya
Author:Webfeya
Author URI:https://webfeya.com/
*/

#wpadminbar {height:3px !important; overflow:hidden; z-index:9999;}
#wpadminbar:hover {height:32px !important;}
.post-edit-link {position:absolute; top:20px; right:20px; color:red; z-index:2000;}

* {border:medium none; margin:0; padding:0; -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
*:hover, *:active, *:focus {outline:none !important;}
html {background:#fff; height:100%;}
body {height:100%; color:#000; font-size:14px; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; display:flex; flex-direction:column; position:relative;} 
.topBg {background:url(images/stars.svg); width:100%; height:224px; opacity:1; transition:opacity linear 1.4s,top linear 0.8s; position:absolute; left:0; top:10px; z-index:1;}
.scrolled .topBg {opacity:0; transition:opacity linear 0.5s,top linear 1.2s; top:2px;}
@media(max-width:767px){
	body {overflow-x:hidden;}
}

div {-moz-box-sizing:border-box; box-sizing:border-box; float:none;}
table {border-spacing:0; padding:0;}
a {color:#000; outline:medium none; text-decoration:none;}
a:hover, a:active, a:focus {color:inherit; text-decoration:none;}

.wImg {width:0; height:0;}

.clr {clear:both;}
@media (max-width:767px) {
  .row-xs {margin:0 -15px;}
}

#header {min-height:80px; flex:0 0 auto;}
#header.fixed {background:#fff; width:100%; position:fixed; left:0; top:0;}
@media(max-width:767px){
	#header.open:before {content:''; background:#fff; width:100%; height:60px; position:fixed; left:0; top:0; z-index:8;}
}

main {flex:1 0 auto; overflow:hidden; position:relative; z-index:1;}
#footer {height:270px; flex:1 0 auto; position:relative; z-index:1;}

.menuBtn {width:30px; height:30px; display:inline-block; position:absolute; right:20px; top:16px; z-index:15;}
.menuBtn span {background:#000; width:26px; height:2px; margin-left:2px; position:relative; display:block; border-radius:1px; transition:ease .3s;}
.menuBtn span {margin-top:6px;}
#header.open .menuBtn span {background:#000;}
#header.open .menuBtn span:nth-child(1) {transform:rotate(45deg) translateZ(0px); width:26px; height:2px; top:5px; left:0;}
#header.open .menuBtn span:nth-child(2) {display:none;}
#header.open .menuBtn span:nth-child(3) {transform:rotate(-45deg) translateZ(0px); width:26px; height:2px; top:-3px; left:0;}
@media (min-width:768px) { 
  .menuBtn {display:none;}
}

.totop {width:37px; height:37px; border-radius:50%; position:fixed; bottom:20px; right:15px; text-decoration:none !important; z-index:4; visibility:hidden; opacity:0; animation:animBg 10000ms infinite alternate; /*transition:ease .2s;*/}
.totop:after {content:''; width:7px; height:7px; border:solid #fff; border-width:0 3px 3px 0; transform:rotate(-135deg); position:absolute; left:50%; top:50%; margin:-4px 0 0 -5px;}
.scrolled .totop {visibility:visible; opacity:0.3;}
.scrolled .totop:hover {opacity:0.7;}
@media (min-width:768px) {   
  .totop {width:48px; height:48px; bottom:30px; right:30px;}
	.totop:after {width:8px; height:8px; margin:-3px 0 0 -5px;}
}

.skillsImg {padding:30px 0 40px; position:relative; z-index:2;}
.skillsImg img {width:auto; max-height:50px; margin:0 auto; display:block;}
.rwImg {padding:60px 0 40px; position:relative; z-index:2;}
.rwImg img {width:auto; max-height:50px; margin:0 auto; display:block;}
@media(min-height:700px){
	.skillsImg {padding:5.7vh 0 7.2vh;}
	.rwImg {padding:60px 0 52px;}
}
@media(min-width:1200px){
	.rwImg {padding:80px 0 70px;}
}

.atom {max-width:200px; width:100%; height:120px; transform:scale(0.8); position:relative; top:-20px;}
.atom > div {border-radius:50%; border:1px solid #fff; transform-style:preserve-3d; transform:rotateX(80deg) rotateY(20deg); position:absolute; left:50%; top:50%; margin-left:-90px; margin-top:-85px;}
.atom > div:nth-of-type(2) {transform:rotateX(-80deg) rotateY(20deg);}
.atom > div:nth-of-type(3) {transform:rotateX(-70deg) rotateY(60deg);}
.atom > div:nth-of-type(3) {transform:rotateX(70deg) rotateY(60deg);}
.atom > div > div {width:180px; height:180px; position:relative; transform-style:preserve-3d; -webkit-animation:trail_ 2s infinite linear; animation:trail_ 2s infinite linear;}
.atom > div:nth-of-type(2) > div, .atom > div:nth-of-type(2) > div:after {-webkit-animation-delay:-0.5s; animation-delay:-0.5s;}
.atom > div:nth-of-type(3) > div, .atom > div:nth-of-type(3) > div:after {-webkit-animation-delay:-1s; animation-delay:-1s;}
.atom > div:nth-of-type(4) > div, .atom > div:nth-of-type(4) > div:after {-webkit-animation-delay:-1.5s; animation-delay:-1.5s;}
.atom > div:first-of-type:after {content:""; position:absolute; height:40px; width:40px; background:#fff; border-radius:50%; transform:rotateX(-80deg) rotateY(0); box-shadow:0 0 25px #fff; -webkit-animation:nucleus_ 2s infinite linear; animation:nucleus_ 2s infinite linear; left:50%; top:50%; margin-top:-20px; margin-left:-20px;}
.atom > div > div:after {content:""; position:absolute; top:-5px; box-shadow:0 0 12px #fff; left:50%; margin-left:-5px; width:5px; height:5px; border-radius:50%; background-color:#fff; -webkit-animation:particle_ 2s infinite linear; animation:particle_ 2s infinite linear;}
.atom > div:nth-of-type(2) > div, .atom > div:nth-of-type(2) > div:after {-webkit-animation-delay:-0.5s; animation-delay:-0.5s;}
.atom > div:nth-of-type(3) > div, .atom > div:nth-of-type(3) > div:after {-webkit-animation-delay:-1s; animation-delay:-1s;}
.atom > div:nth-of-type(4) > div, .atom > div:nth-of-type(4) > div:after {-webkit-animation-delay:-1.5s; animation-delay:-1.5s;}
@media(max-width:375px){
	.atom {transform:scale(0.9);}
}
@media(min-width:420px){
	.atom {transform:scale(1); top:-10px;}
}
@media(min-width:480px){
	.atom {top:0;}
}

.skyBg {background:linear-gradient(#00002b 0%, #351494 50%, #1f1f47 100%); position:relative; z-index:1;}
.skills {max-width:1254px; padding:0 10px 30px; margin:0 auto; display:grid; grid-template-columns:repeat(2,1fr); gap:10px; display:-ms-flexbox; -ms-flex-align:space-between; -ms-flex-direction:row; flex-direction:row; -ms-flex-wrap:wrap; flex-wrap:wrap; -ms-flex: 1 0 100%; flex: 1 0 100%; position:relative; z-index:2;}
.sEl {transition:transform 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) 0s;}
.sBg {height:200px; padding:10px; border-radius:20px; display:grid; grid-template-columns:1fr; grid-template-rows:1fr 1fr; justify-items:center; position:relative;}
.sBg, .sBg * {transition:transform 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) 0s;}
.sImg {background-position:center 0; background-repeat:no-repeat; background-size:contain; max-width:200px; width:100%; height:100px; border-radius:20px 20px 0 0; animation:1s ease 0s 1 normal forwards running;}
.sInfo {padding:5px 0 0; display:flex; flex-flow:column nowrap; justify-content:center;}
.sTitle {padding:0 2px; color:#fff; font-size:14px; font-weight:500; line-height:1.4; text-align:center; cursor:default;}
.sDes {padding:4px 0 0; color:#ffffffb3; font-size:13px; line-height:18px; text-align:center; cursor:default;}
@media(min-width:350px){
	.skills {padding:0 11px 30px; gap:13px;}
	.sTitle {font-size:16px;}
}
@media(min-width:375px) {
	.skills {padding:0 15px 35px; gap:15px;}
	.sBg {height:216px; padding:12px 10px;}
	.sImg, .atom {height:116px;}
	.sTitle {font-size:16px;}
}
@media(min-width:420px){
	.skills {padding:0 18px 40px;}
	.sBg {height:230px; padding:15px 12px;}
	.sImg, .atom {height:120px;}
	.sTitle {padding:0 5px; font-size:17px;}
}
@media(min-width:480px){
	.skills {padding:0 20px 40px;}
	.sBg {height:280px;}
	.sImg, .atom {height:150px;}
	.sTitle {font-size:20px;}
	.sDes {padding:10px 0 0; font-size:15px;}
}
@media(max-width:767px){
	.skills {overflow:hidden;}
}
@media(min-width:768px){
	.skills {padding:0 20px 50px; grid-template-columns:repeat(3,1fr); gap:20px;}
	.sBg {height:300px;}
	.sBg:hover {transform:scale(1.1);}
	.sBg:hover .sImg {transform:scale(0.9);}
	.sTitle {padding:0 10px; font-size:21px; line-height:1.3;}
}
@media(min-width:992px){
	.skills {grid-template-columns:repeat(4,1fr);}
	.sTitle {padding:0 10px; font-size:23px;}
}
@media(min-width:1200px){
	.skyBg {background-attachment:fixed;}
	.skills {padding:0 40px 70px;}
	.sTitle {padding:0 15px; font-size:24px;}
}
@media(min-width:1250px){
	.skills {gap:40px;}
}
@media(min-width:1200px) and (min-height:1200px) {
	.skyBg {min-height:100vh;}
}
@media(min-width:1200px) and (min-height:1374px) {
	.skyBg {min-height:1374px;}
}

.sBg1 {background:linear-gradient(209.21deg, #5e2c8d 13.57%, #d33189 98.38%); box-shadow:rgb(211 49 137 / 30%) 0px 20px 40px, rgb(0 0 0 / 5%) 0px 1px 3px;}
.sBg2 {background:linear-gradient(209.21deg, #000695 13.57%, #74459a 98.38%); box-shadow:rgb(116 69 154 / 30%) 0px 20px 40px, rgb(0 0 0 / 5%) 0px 1px 3px;}
.sBg3 {background:linear-gradient(209.21deg, #3f37c9 13.57%, #a553da 98.38%); box-shadow:rgb(165 83 218 / 30%) 0px 20px 40px, rgb(0 0 0 / 5%) 0px 1px 3px;}
.sBg4 {background:linear-gradient(209.21deg, #59009f 13.57%, #1072cc 98.38%); box-shadow:rgb(16 114 204 / 30%) 0px 20px 40px, rgb(0 0 0 / 5%) 0px 1px 3px;}
.sBg5 {background:linear-gradient(209.21deg, #1072cc 13.57%, #59009f 98.38%); box-shadow:rgb(89 0 159 / 30%) 0px 20px 40px, rgb(0 0 0 / 5%) 0px 1px 3px;}
.sBg6 {background:linear-gradient(209.21deg, #001845 13.57%, #3687d8 98.38%); box-shadow:rgb(54 135 216 / 30%) 0px 20px 40px, rgb(0 0 0 / 5%) 0px 1px 3px;}
.sBg7 {background:linear-gradient(209.21deg, #9208a9 13.57%, #e9a1a1 98.38%); box-shadow:rgb(233 161 161 / 30%) 0px 20px 40px, rgb(0 0 0 / 5%) 0px 1px 3px;}
.sBg8 {background:linear-gradient(209.21deg, #0c1097 13.57%, #0085af 98.38%); box-shadow:rgb(0 133 175 / 30%) 0px 20px 40px, rgb(0 0 0 / 5%) 0px 1px 3px;}
.sBg9 {background:linear-gradient(209.21deg, #3c0b8c 13.57%, #e3a6fe 98.38%); box-shadow:rgb(227 166 254 / 30%) 0px 20px 40px, rgb(0 0 0 / 5%) 0px 1px 3px;}
.sBg10 {background:linear-gradient(209.21deg, #592a79 13.57%, #e87e72 98.38%); box-shadow:rgb(232 126 114 / 30%) 0px 20px 40px, rgb(0 0 0 / 5%) 0px 1px 3px;}
.sBg11 {background:linear-gradient(209.21deg, #2d0eab 13.57%, #6d51e7 98.38%); box-shadow:rgb(109 81 231 / 30%) 0px 20px 40px, rgb(0 0 0 / 5%) 0px 1px 3px;}
.sBg12 {background:linear-gradient(209.21deg, #169bad 13.57%, #003687 98.38%); box-shadow:rgb(0 54 135 / 30%) 0px 20px 40px, rgb(0 0 0 / 5%) 0px 1px 3px;}

@keyframes trail_ { 
  from {transform:rotateZ(0deg);} to {transform:rotateZ(360deg);}
}
@keyframes particle_ { 
  from {transform:rotateX(90deg) rotateY(0deg);} to {transform:rotateX(90deg) rotateY(-360deg);} 
}
@keyframes nucleus_ { 
  0%, 100% {box-shadow:0 0 0 transparent;} 
	50% {box-shadow:0 0 25px #fff;}
}

@keyframes animBg {
	0% {background-color:#ec008c;}
	100% {background-color:#00bcc3;}
	50% {background-color:#5fb26a;}
	33.3% {background-color:#fc7331;}
}

body:after {content:''; width:100%; height:1px; position:fixed; left:0; top:0; z-index:100; animation:animBg 20000ms infinite alternate;}

.listBox {background:#fff; margin:0 auto; max-width:1452px; padding:0 15px 80px;}
.list .item {padding:0 0 50px; font-weight:500; text-align:center; display:inline-block;}
.list .item a {font-size:16px; display:block;}
.list .item img {width:100%; height:auto; min-height:160px; margin:0 0 15px; box-shadow:0 0 20px rgba(0,0,0,0.19); display:block;}
.list .item span {max-width:80%; margin:0 auto; display:block;}
@media(min-width:350px){
	.list .item a {font-size:17px;}
}
@media(min-width:480px){
	.list .item a {font-size:18px;}
}
@media(min-width:540px){
	.listBox {padding:0 18px 40px;}
	.list {margin:0 -9px; display:flex; flex-flow:row wrap;}
	.list .item {width:50%; padding:0 9px 60px;}
	.list .item img {min-height:180px;}
}
@media(min-width:768px){
	.listBox {padding:0 29px 40px;}
	.list {margin:0 -15px;}
	.list .item {padding:0 15px 60px;}
	.list .item img {min-height:230px;}
}
@media(min-width:1024px){
	.list .item {width:33.3333333%;}
}
@media(min-width:1200px){
	.listBox {padding:0 20px 40px;}
	.list {margin:0 -20px;}
	.list .item {padding:0 20px 70px;}
	.list .item img {transition:box-shadow ease .3s;}
	.list .item img:hover {box-shadow:0 0 20px rgba(0,0,0,0.67); -moz-box-shadow:0 0 20px rgba(0,0,0,0.67); -webkit-box-shadow:0 0 20px rgba(0,0,0,0.67);}
	.list .item span {max-width:300px;}
}
@media(min-width:1452px){
	.list .item img {min-height:340px;}
}

.title2 {padding:0 0 30px; font-size:20px; font-family:serif; text-align:center;}
@media(min-width:1200px){
	.title2 {padding:0 0 45px; font-size:30px;}
}