/**  ------------- loader  ---------------*/
#loader{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background:var(--light);}
#loader svg{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto}
.line{stroke:var(--color1);stroke-dasharray:1120;animation:dash .8s reverse}
.tiny-line{fill:var(--color1);transform-origin:50% 0%;animation:tiny .8s linear}
.circle{animation:circle .4s linear}
.circle2,.circle{fill:var(--color6);transform:scale(1);transform-origin:50% 0%}
.circle2{animation:circle2 .3s linear}
@keyframes dash{
  to{stroke-dashoffset:1120}
}
@keyframes tiny{
  0%{fill:#00f;opacity:0;transform:translate(100%) rotate(1turn)}
}
@keyframes circle{
  0%{transform:scale(0)}
}
@keyframes circle2{
  0%{transform:scale(0)}
}
.hide{display:none!important}
/**  ------------- image hover  ---------------*/
a.image-hover{width:19em;height:19em}
.image-hover img{height:19em}
@media (max-width:1200px){
  a.image-hover{width:19em;height:19em}
  .image-hover img{height:19em}
}
@media (max-width:768px){
  a.image-hover{width:100%;height:40em}
  .image-hover img{height:40em}
}
@media (max-width:600px){
  a.image-hover{width:100%;height:20em}
  .image-hover img{height:20em}
}
@media (max-width:400px){
  a.image-hover{width:100%;height:16em}
  .image-hover img{height:16em}
}
a.image-hover{position:relative;display:block;overflow:hidden}
.image-hover img{position:absolute;left:0}
.image-hover span{position:absolute;left:0;z-index:1;height:100%;width:100%;background:var(--color6);color:var(--color3);text-align:center;opacity:0;line-height:15em;transition:all 500ms ease}
.image-hover:focus span,.image-hover:hover span{opacity:1;transition:all 500ms ease}
/**  ------------- app  ---------------*/
#app{background-image:var(--fondo);background-size:cover;background-repeat:no-repeat;background-position: 50% 0%;background-color:var(--light);background-attachment:scroll;position:relative;max-width:90em;margin:auto;height:100%;z-index:2;overflow:hidden;border-radius:8px;}
#app:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--light);opacity:0;z-index:1}
/**  ------------- header  ---------------*/
.header{min-height:3em;overflow:hidden;margin-left:2em;margin-right:2em;padding:2em 1em;z-index:5;position:relative}
.header .logo{float:left;font-size:1.3em;font-family:var(--headerFont);font-weight:700;color:var(--color)}
.header .logo span{color:var(--color6)}
.header .navigation{float:right;font-family:var(--bodyFont)}
.header .navigation a{text-decoration:none;margin-left:1em;color:var(--color4);-webkit-transition:all .5s ease;transition:all .5s ease;font-weight:bold;}
.header .navigation a.active-link,.header .navigation a:hover{color:var(--color7);-webkit-transition:all .5s ease;transition:all .5s ease;}
/**  ------------- main  ---------------*/
main.content{margin-left:0;margin-right:0;padding:0;z-index:4;position:relative;height:calc(100% - 6em);overflow:auto;font-size:16px;letter-spacing:1px}
main.content.active{opacity:0;-webkit-animation:load 1s ease 1;animation:load 1s ease 1}
@-webkit-keyframes load{
  0%{opacity:0;width:0}
}
@keyframes load{
  0%{opacity:0;width:0}
}
/**  ------------- inicio  ---------------*/
.inicio h1{color:var(--color4);font-size:4em;margin:0;margin-top: 2.25em;letter-spacing:15px;text-shadow:3px 3px 0px var(--color3),6px 6px 0px var(--color6);}
.inicio h1{animation:shadowtxt 10s infinite cubic-bezier(0.45,0.05,0.55,0.95);}
@keyframes shadowtxt{
  50%{text-shadow:3px 3px 0px var(--color6),6px 6px 0px var(--color3);}
}
.inicio h2{font-family:quickand,sans-serif;font-weight:200;color:var(--color2);letter-spacing:6px;line-height:38px;position:relative;}

.inicio img{width:100%}
.inicio .col-6:nth-child(2){-webkit-animation:a2 .8s ease;animation:a2 .8s ease}
@-webkit-keyframes a2{
  0%{-webkit-transform:scale(0);transform:scale(0)}
}
@keyframes a2{
  0%{-webkit-transform:scale(0);transform:scale(0)}
}
@media (max-width:768px){
  .inicio h1{font-size:4em;margin:0;margin-top:inherit}
}
/**  ------------- ambitos  ---------------*/
.ambitos .col-4:first-child{-webkit-animation:a3 .3s ease;animation:a3 .3s ease}
.ambitos .col-4:nth-child(2){-webkit-animation:a4 .5s ease;animation:a4 .5s ease}
.ambitos .col-4:nth-child(3){-webkit-animation:a3 .3s ease;animation:a3 .3s ease}
@-webkit-keyframes a3{
  0%{-webkit-transform:translateY(-100%);transform:translateY(-100%)}
}
@keyframes a3{
  0%{-webkit-transform:translateY(-100%);transform:translateY(-100%)}
}
@-webkit-keyframes a4{
  0%{-webkit-transform:translateY(-100%);transform:translateY(-100%)}
}
@keyframes a4{
  0%{-webkit-transform:translateY(-100%);transform:translateY(-100%)}
}
/**  ------------- accordion  ---------------*/
.accordion{background-color:var(--light);color:var(--color6);cursor:pointer;padding:18px;width:100%;text-align:left;border:none;outline:none;-webkit-transition:.4s;transition:.4s;}
.accordion i{float:right}
.accordion.active,.accordion:hover{background-color:var(--color6);color:var(--color3)}
.dark-mode .accordion{background-color:var(--color1);color:var(--color);cursor:pointer;padding:18px;width:100%;text-align:left;border:none;outline:none;-webkit-transition:.4s;transition:.4s;}
.dark-mode .accordion i{float:right}
.dark-mode .accordion.active,.accordion:hover{background-color:var(--color7);color:var(--color);}
.panel{padding:0 18px;background-color:var(--light);color:var(--color);max-height:0;overflow:hidden;-webkit-transition:max-height .2s ease-out;transition:max-height .2s ease-out}
.dark-mode .panel{background-color:var(--color2);}
/**  ------------- acerca de  ---------------*/
.acerca-de .col-6:first-child{-webkit-animation:a3 .3s ease;animation:a3 .3s ease}
.acerca-de .col-6:nth-child(2){-webkit-animation:a4 .5s ease;animation:a4 .5s ease}
.acerca-de img{padding:0.5rem;background:var(--light);border:6px solid var(--color6);box-shadow:0px 6px 6px -6px var(--color);border-radius:0;margin:1rem auto;filter:saturate(1.2);}

/**  ------------- contact  ---------------*/
.contacto{font-size:1.3em}
.contacto h3{color:var(--color2)}
.contacto .row{margin-top:3em}
.contacto .row i,.contacto .share{color:var(--color6)}
.contacto .share{margin-right:1em}
.contacto .col-4:first-child{-webkit-animation:a3 .3s ease;animation:a3 .3s ease}
.contacto .col-4:nth-child(2){-webkit-animation:a4 .5s ease;animation:a4 .5s ease}
.contacto .col-4:nth-child(3){-webkit-animation:a3 .3s ease;animation:a3 .3s ease}
@-webkit-keyframes a3{
  0%{-webkit-transform:translateY(100%);transform:translateY(100%)}
}
@keyframes a3{
  0%{-webkit-transform:translateY(100%);transform:translateY(100%)}
}
@-webkit-keyframes a4{
  0%{-webkit-transform:scale(0);transform:scale(0)}
}
@keyframes a4{
  0%{-webkit-transform:scale(0);transform:scale(0)}
}
/**  ------------- card  ---------------*/
.card{text-decoration:none}
.card h3{color:var(--color6)}
.card h3 small{color:var(--color)}
/**  ------------- notfound  ---------------*/
.notfound h1{font-size:7rem;margin:0;padding:0;color:var(--color7);}
.notfound h2{font-size:3rem;margin:0;padding:0;color:var(--color5);}
.notfound h1{color:var(--color4);margin:0;margin-top:1.25em;letter-spacing:15px;text-shadow:3px 3px 0px var(--color3),6px 6px 0px var(--color6);}
.notfound h1{animation:notfoundshadow 10s infinite cubic-bezier(0.45,0.05,0.55,0.95);}
@keyframes notfoundshadow{
  50%{text-shadow:3px 3px 0px var(--color6),6px 6px 0px var(--color3);}
}

/**  ------------- proyects  ---------------*/
.proyects a{text-decoration:none;display:block;opacity:0;visibility:hidden;}
.proyects a.anim{opacity:1;visibility:visible;transition:all 300ms ease;animation:showProyect 300ms 1 ease-in-out;}
@keyframes showProyect{from{opacity:0;transform:scale(0.5);border-radius:100%;}}
.proyect{user-select:none;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:100%;height:18rem;background: var(--color7);border: 1px solid var(--color7);box-shadow: 0px 6px 6px -6px var(--color7);border-radius:2px;transition:all 500ms ease;}
.proyect:hover{background: #d0fcff;transition:all 500ms ease;}
.proyect img{position:absolute;width:100%;height:100%;opacity:0.2;filter:hue-rotate(100deg);z-index:2;}
.proyect-title{font-size:1.5rem;font-weight:bold;text-align:center;color: var(--color6);z-index:3;}
.proyect-description{font-size:1rem;text-align:center;color: var(--color);max-width:85%;z-index:3;}
.dark-mode .proyect{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:100%;height:18rem;background:var(--color2);border:1px solid var(--color2);box-shadow:0px 6px 6px -6px var(--color);border-radius:2px;}
.dark-mode .proyect:hover{background:var(--color7);}
.dark-mode .proyect img{position:absolute;width:100%;height:100%;opacity:0.2;filter:grayscale(1);}
.dark-mode .proyect-title{font-size:1.5rem;font-weight:bold;text-align:center;color:var(--color4);}
.dark-mode .proyect-description{font-size:1rem;font-weight:500;text-align:center;color:var(--color3);}

/**  ------------- media queries  ---------------*/
@media (max-width:768px){
  .header{margin-left:0;margin-right:0}
  .header .navigation{opacity:0;visibility:hidden;-webkit-transition:opacity .5s ease;transition:opacity .5s ease}
  .header .navigation a{display:none}
  .header a.btn-menu{width:2em;height:1em;position:absolute;top:1em;right:1em;font-size:1.5rem;margin:0;display:block;}
  .header a.btn-menu span{position:absolute;top:0;right:0;width:75%;height:.05em;margin:0;background:var(--color);-webkit-transition:all .5s ease;transition:all .5s ease}
  .header a.btn-menu span:first-child{width:50%}
  .header a.btn-menu span:nth-child(2){top:.5em}
  .header.active{overflow:auto!important;min-height:100vh}
  .header.active .navigation{float:none;position:fixed;top:0;left:0;width:100%;height:100%;background:var(--color6);z-index:999999;text-align:center;overflow:auto;opacity:1;visibility:visible;-webkit-animation:clip2 1s ease-out 1;animation:clip2 1s ease-out 1;-webkit-clip-path:circle(100% at 50% 50%);clip-path:circle(100% at 50% 50%);-webkit-transition:opacity .5s ease;transition:opacity .5s ease}
  .header.active .navigation a{display:block;width:100%;margin:1em auto;font-size:2em;text-align:center;color:var(--color3)}
  .header.active .navigation a.active-link,.header.active .navigation a:focus{color:var(--color5)}
  .header.active .navigation a:nth-child(2){margin-top:3em}
  .header.active .navigation a.btn-menu{margin:0;width:2em;top:1em;right:1em}
  .header.active .navigation a.btn-menu span{-webkit-transform:translateY(14px) rotate(45deg);transform:translateY(14px) rotate(45deg);-webkit-transition:all .5s ease;transition:all .5s ease;width:75%}
  .header.active .navigation a.btn-menu span+span{-webkit-transform:translateY(1px) rotate(-45deg);transform:translateY(1px) rotate(-45deg);-webkit-transition:all .5s ease;transition:all .5s ease;width:75%}
  .header.active .navigation .share{display:inline-block;text-align:center;margin:0;width:2em;height:2em}
  main.content{margin-left:1em;margin-right:1em}
  #app{height:auto;min-height:100%;overflow:auto;margin:auto;border:0;border-radius:0;}
}
@media (min-width:1400px){#app{height:calc(100% - 6em);max-height:60rem;margin-top:3em;}}

@media (max-width:1024px){.inicio h1{margin-top: 6.5rem;}}

@media (max-width:768px){#app:before{opacity:0.8}}

@media (max-width:764px){
  .inicio h1,.inicio h2{letter-spacing:9px}
  .inicio h2:before{width:155px;}
  #app{background-position: 10% 2%;padding-bottom:2rem;background-attachment: scroll;background-size: contain;}
  #app:before{opacity:0.8}
  main.content{margin-left:0.2em;margin-right:0.2em}
  table td:nth-child(2){max-width:7rem}
  table th:nth-child(3){display:none}
  table td:nth-child(3){display:none}
  table td{border-bottom:5px solid #ebe9f4}
}
@media (max-width:360px){
  .header a.btn-menu{font-size:1.5rem;top:2.3rem;}
  .header.active .navigation a.btn-menu{font-size:1.5rem;top:1.5rem;width:3rem;height:3rem}
  .header .logo{font-size:1rem;}
  .inicio h1,.inicio h2{letter-spacing:2px}
  #app{background-position: 10% 4%;padding-bottom:2rem;}
  .acerca-de h1:after{content:"";position:absolute;top:0;left:0;width:280px;}
}