/* --color-downriver: #0D2154;
--color-chambray: #405294;
--color-kashmir-blue: #4E5D94;
--color-mine-shaft: #333333;
--color-tapestry: #B35F75;
--color-mine-shaft: #333333;
--color-linen: #FBF4EC;
--color-glacier: #75AEC2;
--color-kashmir-blue: #4E5D94;
--color-thatch: #B3949C;
--color-downriver: #0D2154;
--color-concrete: #F2F2F2; */
/* || UTILITIES */

body{
  font-family: Helvetica, Arial, sans-serif;
}
.container2{
  width: 50%;
  margin: 0 auto;
}
@keyframes load{
  from {
    width: 0%
  }
}
@-webkit-keyframes load{
  from {
    width: 0%
  }
}
@-moz-keyframes load{
  from {
    width: 0%
  }
}
@-o-keyframes load{
  from {
    width: 0%
  }
}

.bar{
  background-color: transparent;
  padding: 2px;
  margin-bottom: 5px;
  font-size: 14px;
  color: #FFF;
}
.bar::before{
  content:  attr(data-skill);
  background-color: var(--contrastcol);
  display: inline-block;
  padding: 5px 0 5px 10px;
  border-radius: inherit;
  animation: load 2s 0s;
  -webkit-animation: load 2s 0s;
  -moz-animation: load 2s 0s;
  -o-animation: load 2s 0s;
  height: 10px;
}

.bar.front::before{
  background-color: var(--contrastcol);
}
.bar.back::before{
  background-color: var(--contrastcol);
}

.bar.beginner::before{
  width: calc(15% - 10px);
}
.bar.learning::before{
  width: calc(20% - 10px);
}
.bar.basic::before{
  width: calc(40% - 10px);
}
.bar.intermediate::before{
  width: calc(60% - 10px);
}
.bar.advanced::before{
  width: calc(80% - 10px);
}
.bar.superadvanced::before{
  width: calc(90% - 10px);
}
.bar.expert::before{
  width: calc(100% - 10px);
  /* height: 10px; */
}

.skillname {
	font-size: 1em;
	/* text-transform: uppercase; */
  color: var(--textcol);
}


ul.mylist  {
  /* list-style: none; /* Remove default bullets */
  list-style-type: none;
  /* color: #0f4f34; */
}

ul.mylist li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: var(--thirdcol); /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
  margin-top: 1em;
  /* padding-bottom: 0.5em; */
  /* line-height: 10em; */
}

.endnote{
  /* font-family: Qwigley; */
  /* font-size: 1em; */
  font-style: italic;
  line-height: 1.3em;
  margin-top: 0;
	margin-bottom: 0;
  color: #333;
  /* height: 2em; */
}

.hidden{
  display: none;
}

.myicons{
  padding-right: 10px;
  color: var(--secondcol);
}

.blurimage{
  -webkit-filter: blur(2px) ; /* Safari 6.0 - 9.0 */
  filter: blur(2px);
}

.breadcrumbname{
  display: none;
}

.breadcrumb {
  background-color: transparent;
  list-style-type: none;
  padding: 0;
  text-align: center;
  /* margin: 0; */
  /* float: none; */
  /* display: block; */
  margin: auto;
  color: var(--secondcol);

}
.breadcrumb .activeproject{
  color: var(--redcolor);
  /* color: var(--secondcol); */
}

.breadcrumb a:hover {
  text-decoration: none;
  /* color: var(--headercolor); */
  color: #dadada;
  /* text-decoration: underline; */
}



.cont_principal {
position: absolute;
  width: 100%;
  height: 100%;
overflow: hidden;
}
.cont_error {
position: absolute;
  width: 100%;
  height: 300px;
  top: 50%;
  margin-top:-150px;
}

.cont_error > h1  {
 /* font-family: 'Lato', sans-serif; */
font-weight: 400;
  font-size:150px;
/* color:#fff; */
position: relative;
left:-100%;
/* transition: all 0.5s; */
}


.cont_error > p  {
 /* font-family: 'Lato', sans-serif; */
font-weight: 300;
  font-size:24px;
  letter-spacing: 5px;
/* color:#9294AE; */
position: relative;
left:100%;
/* transition: all 0.5s; */
    /* transition-delay: 0.5s; */
/* -webkit-transition: all 0.5s; */
 /* -webkit-transition-delay: 0.5s; */
}

.cont_aura_1 {
  position:absolute;
  width:300px;
  height: 120%;
top:25px;
right: -340px;
  background-color: var(--secondcol);
/* box-shadow: 0px 0px  60px  20px  rgba(137,100,222,0.5); */
-webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.cont_aura_2 {
  position:absolute;
  width:100%;
  height: 300px;
right:-10%;
bottom:-301px;
 background-color: var(--textcol);
/* box-shadow: 0px 0px 60px 10px rgba(131, 95, 214, 0.5),0px 0px  20px  0px  rgba(0,0,0,0.1); */
  z-index:5;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}

.cont_error_active > .cont_error > h1 {
  left:0%;
}
.cont_error_active > .cont_error > p {
  left:0%;
}