body{background-color:#000; font-family: "Lato", sans-serif}
.video-background {
  background: #000;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
}
.video-foreground,
.video-background iframe,#video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-bottom:60px!important;
}
h1{color: #fff !important;font-size:2em;}
#widget div,.g-background-default div{background-color: #111!important;}
#ytplayer{width:100%;height:100%;position: fixed}
#defaultCanvas0{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1}
img{-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-o-user-select: none;user-select: none;-webkit-tap-highlight-color: transparent}
::selection{ background: transparent}
::-moz-selection{ background: transparent}
#defaultCanvas0{opacity: 0.4}
header{background-color:#0e0f10!important}
a{color:inherit}
a:hover{color:inherit}
.projects{ margin-bottom: 4rem}
.container{ display: flex; justify-content: center; align-items: center; }
.card{ background-color: transparent!important; transform-style: preserve-3d; border-radius: 30px; padding: 0rem 5rem; box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2), 0px 0px 50px rgba(0, 0, 0, 0.2); }
.card a{ color:#ccc; font-size: 1.5em; text-decoration: none; text-align: center; }
.siteLogo{ min-height: 25vh; display: flex; align-items: center; justify-content: center; }
.siteLogo img{ width: 20rem; z-index: 2; transition: all 0.75s ease-out; max-width:200px }
.circle{ width: 15rem; height: 15rem; background: linear-gradient( to right, rgba(195, 4, 0, 0.75), rgb(39, 0, 0) ); position: absolute; border-radius: 50%; z-index: 1; }
.circleWhite{ font-size: 1.3rem; padding: 1.5rem 0rem; width: 15rem; height: 15rem; background: linear-gradient( to right, rgb(0, 0, 0), rgb(202, 146, 0) ); position: absolute; border-radius: 50%; z-index: 1; }
.subtitle{z-index:1000000000!important}
.circleBlue{ font-size: 1.3rem; padding: 1.5rem 0rem; width: 15rem; height: 15rem; background: linear-gradient( to right, rgb(66, 147, 245), rgb(1, 4, 57) ); position: absolute; border-radius: 50%; z-index: 1; }
.info h1{ font-size: 2rem; transition: all 0.75s ease-out; color:#ccc }
.info h3{ text-align: center; margin:10px 0px; font-size: 1.2em; color: #ddd; font-weight: lighter; transition: all 0.75s ease-out; }
.languages{ display: flex; justify-content: space-between; transition: all 0.75s ease-out; }
.text-small{font-size:0.7em}
.languages button{ padding: 0.5rem 2rem; background: none; border: 1px solid #b1b1b1; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); border-radius: 30px; cursor: pointer; font-weight: bold; color: #f3f3f3; }
.languages button:hover{ color:#b1b1b1 }
.languages .php{ }
.languages .js{ }
.languages .wp{ }
button.active, a.active{ background: #000000; color: #777; }
button:focus{ border:0px transparent!important; }
.skillsAbout{font-size:0.8em!important}
.goto{ margin-top: 3rem; padding-top: 5px; transition: all 0.75s ease-out; }
.goto button, .goto a{ width: 100%; padding: 1.5rem 0rem; }
.languagesW{ width: 30px}
.glow-on-hover{ height: 50px; border: none; outline: none; color: #999; background: #000; cursor: pointer; position: relative; z-index: 0; border-radius: 10px; }
.glow-on-hover:before{ content: ''; background: linear-gradient(45deg, #ff0000, #ff7300, #f3b400, #5d0000); position: absolute; top: -2px; left: -2px; background-size: 400%; z-index: -1; filter: blur(5px); width: calc(100% + 4px); height: calc(100% + 4px); animation: glowing 20s linear infinite; opacity: 1; transition: opacity .3s ease-in-out; }
.pict{max-width: 100px;opacity: 0.7}
.pict:hover{max-width: 100px;opacity: 1; transition-duration: 0.3s}
.glow-on-hover-darkred:before{ content: ''; background: linear-gradient(45deg, #580000, #5b2e00, #5d4700, #625500); position: absolute; top: -2px; left: -2px; background-size: 400%; z-index: -1; filter: blur(5px); width: calc(100% + 4px); height: calc(100% + 4px); animation: glowing 20s linear infinite; opacity: 1; transition: opacity .3s ease-in-out; }
.glow-on-hover:active{ color: #000 }
.glow-on-hover:active:after{ background: transparent; }
.glow-on-hover:hover:before{ opacity: 1; }
.glow-on-hover:after{ z-index: -1; content: ''; position: absolute; width: 100%; height: 100%; background: #000; left: 0; top: 0; border-radius: 10px; }
@keyframes glowing{ 0%{ background-position: 0 0; }
 50%{ background-position: 400% 0; }
 100%{ background-position: 0 0; }
}
.line-1{ position: relative; top: 50%; width: 20.18em; margin: 0 auto; border-right: 2px solid rgba(255,255,255,.75); text-align: center; white-space: nowrap; overflow: hidden; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-box-sizing:content-box; box-sizing:content-box; }
/* Animation */ 
.anim-typewriter{ width:0; /*animation: typewriter 4s steps(44) 1s 1 normal both, blinkTextCursor 500ms steps(44) infinite normal;*/}
/*@keyframes typewriter{ from{width: 0}
 to{width: 24em}
}

@keyframes blinkTextCursor{ from{border-right-color: rgba(255,255,255,.75)}
 to{border-right-color: transparent}
 }
*/
.footer{ border-top: 1px solid #333; background-color: #000;bottom:0; z-index:11000000!important;opacity: 0.9;color: #fff; position: fixed;margin-top: 60px;  bottom: 0; left :0;width: 100%; height: 60px; line-height: 60px;}
.header{ background-color: #000;bottom:0;margin-bottom: 80px; z-index:11000000!important;color: #fff;opacity: 0.97; position: fixed;top: 0; left:0; width: 100%; height: 90px; line-height: 70px;border-bottom: 1px solid #333;
}
@media (min-width: 1120px){}
@media (max-width: 1119px){ .projects{ margin-top: 30px}
 .circle{margin-bottom: 20px}
 }
/*.navbar-toggler:focus,.navbar-toggler:active{ outline: 0}
.navbar-toggler span{ display: block; background-color: #aaa; height: 3px; width: 25px; margin-top: 4px; margin-bottom: 4px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); position: relative; left: 0; opacity: 1}
.navbar-toggler span:nth-child(1),.navbar-toggler span:nth-child(3){ -webkit-transition: transform .35s ease-in-out; -moz-transition: transform .35s ease-in-out; -o-transition: transform .35s ease-in-out; transition: transform .35s ease-in-out}
.navbar-toggler:not(.collapsed) span:nth-child(1){ position: absolute; left: 12px; top: 10px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); opacity: 0.9}
.navbar-toggler:not(.collapsed) span:nth-child(2){ height: 12px; visibility: hidden}
.navbar-toggler:not(.collapsed) span:nth-child(3){ position: absolute; left: 12px; top: 10px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); opacity: 0.9}
*/
@media (max-width: 720px){ h3{margin-top: 20px}
}

.navbar-toggler{border:0px!important;color:#eee!important}
.navbar-toggler-icon{width:0.8em}
img{-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;user-select: none;-webkit-tap-highlight-color: transparent}
::selection{ background: transparent;color:#111}
::-moz-selection{ background: transparent;color:#111}