/*************** SCROLLBAR BASE CSS ***************/

@keyframes blur {
    from {
        text-shadow: 0px 0px 10px #f00, 0px 0px 10px #f00, 0px 0px 25px #f00, 0px 0px 25px #f00, 0px 0px 25px #f00, 0px 0px 25px #f00, 0px 0px 25px #f00, 0px 0px 25px #f00, 0px 0px 50px #f00, 0px 0px 50px #f00, 0px 0px 50px #7B96B8, 0px 0px 150px #7B96B8, 0px 10px 100px #7B96B8, 0px 10px 100px #7B96B8, 0px 10px 100px #7B96B8, 0px 10px 100px #7B96B8, 0px -10px 100px #7B96B8, 0px -10px 100px #7B96B8;
    }
}

    .scroll-wrapper {
        overflow: hidden !important;
        padding: 0 !important;
        position: relative;
    }
     
    .scroll-wrapper > .scroll-content {
        border: none !important;
        box-sizing: content-box !important;
        height: auto;
        left: 0;
        margin: 0;
        max-height: none;
        max-width: none !important;
        overflow: scroll !important;
        padding: 0;
        position: relative !important;
        top: 0;
        width: auto !important;
    }
     
    .scroll-wrapper > .scroll-content::-webkit-scrollbar {
        height: 0;
        width: 0;
    }
     
    .scroll-element {
        display: none;
    }
    .scroll-element, .scroll-element div {
        box-sizing: content-box;
    }
     
    .scroll-element.scroll-x.scroll-scrollx_visible,
    .scroll-element.scroll-y.scroll-scrolly_visible {
        display: block;
    }
     
    .scroll-element .scroll-bar,
    .scroll-element .scroll-arrow {
        cursor: default;
    }
     
    .scroll-textarea {
        border: 1px solid #cccccc;
        border-top-color: #999999;
    }
    .scroll-textarea > .scroll-content {
        overflow: hidden !important;
    }
    .scroll-textarea > .scroll-content > textarea {
        border: none !important;
        box-sizing: border-box;
        height: 100% !important;
        margin: 0;
        max-height: none !important;
        max-width: none !important;
        overflow: scroll !important;
        outline: none;
        padding: 2px;
        position: relative !important;
        top: 0;
        width: 100% !important;
    }
    .scroll-textarea > .scroll-content > textarea::-webkit-scrollbar {
        height: 0;
        width: 0;
    }
     
     
     
     
    /*************** SIMPLE INNER SCROLLBAR ***************/
     
    .scrollbar-inner > .scroll-element,
    .scrollbar-inner > .scroll-element div
    {
        border: none;
        margin: 0;
        padding: 0;
        position: absolute;
        z-index: 10;
    }
     
    .scrollbar-inner > .scroll-element div {
        display: block;
        height: 100%;
        left: 0;
        top: 0;
        width: 100%;
    }
     
    .scrollbar-inner > .scroll-element.scroll-x {
        bottom: 2px;
        height: 8px;
        left: 0;
        width: 100%;
    }
     
    .scrollbar-inner > .scroll-element.scroll-y {
        height: 100%;
        right: 2px;
        top: 0;
        width: 8px;
    }
     
    .scrollbar-inner > .scroll-element .scroll-element_outer {
        overflow: hidden;
    }
     
    .scrollbar-inner > .scroll-element .scroll-element_outer,
    .scrollbar-inner > .scroll-element .scroll-element_track,
    .scrollbar-inner > .scroll-element .scroll-bar {
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
    }
     
    .scrollbar-inner > .scroll-element .scroll-element_track,
    .scrollbar-inner > .scroll-element .scroll-bar {
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
        filter: alpha(opacity=40);
        opacity: 0.4;
    }
     
    .scrollbar-inner > .scroll-element .scroll-element_track {  }
    .scrollbar-inner > .scroll-element .scroll-bar { background-color: rgba(194, 194, 194, 0.27); }
    .scrollbar-inner > .scroll-element:hover .scroll-bar { background-color: rgba(194, 194, 194, 0.57); }
    .scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar { background-color: rgba(194, 194, 194, 0.97); }
     
     
    /* update scrollbar offset if both scrolls are visible */
     
    .scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -12px; }
    .scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -12px; }
     
     
    .scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -12px; }
    .scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -12px; }








* {
	margin : 0;
	padding : 0;
}
.qutton{
	box-sizing : content-box !important;
	background-repeat : no-repeat !important;
	background-position: center center !important;
	box-shadow:  0 3px 6px 0 rgba(0, 0, 0, 0.3);
	cursor : auto;
}

.qutton.close {
	position : absolute !important;
	cursor : pointer;
}

.quttonClonePlaceHolder {
	visibility: hidden;
}


.surredbtn * {
  box-sizing: border-box;
  margin: 0;
  padding: 0; }


.buttonCollection {
  width: 280px;
  height: auto;
  margin: 110px auto 0px auto;
  padding: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start; }

.qutton {
  margin-right: 35px; }
  .qutton:last-child {
    margin-right: 0; }

.qutton_dialog {
  display: none; }

.button_basic, #button_basic_upload, #button_basic_confirm_delete, #button_basic_submit_comment {
  display: block;
  width: 250px;
  height: 70px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
  text-align: center;
  line-height: 70px;
  border-radius: 4px;
  font-family: "Roboto";
  cursor: pointer;
  color: #fff; }
  .button_basic:hover, #button_basic_upload:hover, #button_basic_confirm_delete:hover, #button_basic_submit_comment:hover {
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2); }

#uploadDialog {
  width: 300px;
  height: 180px;
  border-radius: 4px;
  background-color: #fff;
  padding: 10px;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2); }
  #uploadDialog h2 {
    text-align: center;
    font-weight: normal;
    padding: 10px;
    font-size: 1.2em; }
  #uploadDialog input#fileUrl {
    width: 100%;
    height: 30px;
    border-radius: 2px;
    border: 1px solid #afafaf;
    padding: 9px;
    font-size: 1em; }
  #uploadDialog .urlField {
    display: block;
    width: 83%;
    height: 30px;
    padding: 5px;
    margin: 10px auto 0 auto; }

#button_basic_upload {
  width: 80%;
  height: 40px;
  line-height: 22px;
  background-color: #498AF2;
  border: 1px solid #196bef;
  border-bottom: 1px solid #105fdf;
  color: white;
  padding: 9px;
  margin: 0 auto;
  margin-top: 20px; }

#deleteDialog {
    border-radius: 4px;
    background: url('/Content/back.png');
    border: 1px solid #ccc;
}
  #deleteDialog h2 {
      padding: 10px;
      font-weight: normal;
      color: #fff;
      height: 189px;
      text-align: left;
      font-size: 1em;

  }

#button_basic_confirm_delete {
    width: 180px;
    height: 35px;
    background-color: #357213;
    text-decoration: none;
    margin: 0 auto;
    line-height: 33px;
    font-size: 1.4em;
    margin-top: 5px;

}

#commentDialog {
  width: 380px;
  height: 250px;
  border-radius: 4px;
  padding: 15px;
  background-color: #fff; }
  #commentDialog textarea#commentInput {
    display: block;
    width: 100%;
    height: 70%;
    margin: 0 auto;
    padding: 8px;
    font-size: 1.2em;
    border-radius: 2px;
    border: 1px solid #afafaf;
    resize: none; }
    #commentDialog textarea#commentInput:focus {
      outline: none; }

#button_basic_submit_comment {
  width: 100%;
  height: 50px;
  line-height: 50px;
  color: white;
  font-size: 1em;
  margin-top: 15px;
  background-color: #498AF2;
  border: 1px solid #196bef; }

/*# sourceMappingURL=main.css.map */



.habilidades_contenedor {
	width: 70%;
	margin-left: 20%;

}


#codeconSkills {
font-size: 1.6em;
height: auto;
margin: 0 auto;
padding: 10px;
width: 75%;
}
#codeconSkills img {
width: 50px;
height:50px;

position: absolute;
right: -70px;
display: none;
}
.codeconSkillbar {
width: 100%;
height: 35px;
position: relative;
background: rgba(17, 17, 17, .3);
}
#codeconHTML {
width: 100%;
animation: Animate-HTML 4s;
-webkit-animation: Animate-HTML 4s;
-moz-animation: Animate-HTML 4s;
-o-animation: Animate-HTML 4s;
height: 50px;
position: absolute;
background-color: #ea8564;
}
@keyframes Animate-HTML {
from {
width: 10px;
}
to {
width: 100%}
}@-webkit-keyframes Animate-HTML {
from {
width: 10px;
}
to {
width: 100%}
}@-moz-keyframes Animate-HTML {
from {
width: 10px;
}
to {
width: 100%}
}@-o-keyframes Animate-HTML {
from {
width: 10px;
}
to {
width: 100%}
}
#codeconCSS {
animation: Animate-CSS 5s;
-webkit-animation: Animate-CSS 5s;
-moz-animation: Animate-CSS 5s;
-o-animation: Animate-CSS 5s;
width: 70%;
height: 50px;
position: absolute;
background-color: #55a69f;
}
@keyframes Animate-CSS {
from {
width: 10px;
}
to {
width: 70%}
}@-webkit-keyframes Animate-CSS {
from {
width: 10px;
}
to {
width: 70%}
}@-moz-keyframes Animate-CSS {
from {
width: 10px;
}
to {
width: 70%}
}@-o-keyframes Animate-CSS {
from {
width: 10px;
}
to {
width: 70%}
}
#codeconjQuery {
animation: Animate-jQuery 5s;
-webkit-animation: Animate-jQuery 5s;
-moz-animation: Animate-jQuery 5s;
-o-animation: Animate-jQuery 5s;
width: 50%;
height: 50px;
position: absolute;
background-color: #99856d;
}



.skillBar {
	width: 5%;
	height:35px;
	position: absolute;
	background-color: transparent;
	transition: 3s;
	-webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
} 

@keyframes Animate-jQuery {
from {
	width: 10px;
}
to {
	width: 50%}
}
@-webkit-keyframes Animate-jQuery {
	from {
		width: 10px;
	}
	to {
		width: 50%
	}
}
@-moz-keyframes Animate-jQuery {
	from {
		width: 10px;
	}
	to {
		width: 50%
	}
}
@-o-keyframes Animate-jQuery {
	from {
		width: 10px;
	}
	to {
		width: 50%
	}
}
#codeconCakePHP {
	animation: Animate-CakePHP 5s;
	/*-webkit-animation: Animate-jQuery 5s;
	-moz-animation: Animate-jQuery 5s;
	-o-animation: Animate-jQuery 5s;*/
	width: 60%;
	height: 50px;
	position: absolute;
	background-color: #2f96b4;
}

@keyframes Animate-CakePHP {
from {
		width: 10px;
}
to {
		width: 60%
	}
}


.codeconSkillArea {
    z-index: 1;
    float: left;
    margin-top: 7px;
    margin-left: 15px;
    text-shadow: none;
    color: #fff;
    font-size: 1.3em;
}
.PercentText {
    z-index: 3;
    position: absolute;
    right:0;
    padding-right: 15px;
    margin-top: 7px;
    float: right;
    text-shadow: none;
    min-width:150px;
    color: #fff;
    font-size: 1.3em;
}