/********************generales*************************/
/*azul #3DA6D7*/

.no-padding{
    padding: 0px 0px !important;
}
.img-resposive{
    max-width:100% !important;
    height:auto !important;
}
/********************TITULO*************************/
#nota-info{
    margin: 30px 0px 40px 0px;
}
#nota-info #anterior{
    font-family: "raleway";
    font-weight: bold;
    font-size: 12px;
    color: grey;
    float: left;
    text-align: left;
    margin-top: 40px;
}
#nota-info #siguiente{
    font-family: "raleway";
    font-weight: bold;
    color: grey;
    font-size: 12px;
    float: right;
    text-align: right;
    margin-top: 40px;
}
#nota-info #anterior i{
    color: #3DA6D7;
    display: block;
}
#nota-info #siguiente i{
    color: #3DA6D7;
    display: block;
}

.titulo #fecha{
    font-family: "raleway";
    float: left;
    color: grey;
    font-size: 15px;
}
.titulo #compartir{
    font-family: "raleway";
    float: right;
    font-size: 15px;
    color: grey;
    display: inline;
    padding-right: 10px;
}
.titulo h4{
    font-size: 15px;
    color: grey;
    display: inline;
    padding-right: 10px;
}
.titulo #compartir i{
    padding: 3px;
}
.titulo h1{
    padding: 20px 0px;
    margin: 0px 0px;
    font-size: 46px;
}
.titulo #experiencia {
    border-top: 1px solid grey;
    border-bottom: 1px solid grey;
    padding: 5px 0px !important;
}
.titulo #experiencia #tiempo{
    font-size: 12px;
    padding: 15px 0px;
    display: inline;
}
.titulo #experiencia #nivel{
    font-size: 12px;
    padding: 15px 0px;
    display: inline;
    padding-left: 30px;
}
.titulo #experiencia #tiempo i{
    color: #3DA6D7;
    padding-right: 5px;
}
.titulo #experiencia #nivel i{
    color: #3DA6D7;
    padding-right: 5px;
    border-left: 1px solid grey;
    padding-left: 50px;
}

.titulo #experiencia #tiempo span{
    color: grey;
}
.titulo #experiencia #nivel span{
    color: black;
    font-size: 10px;
    font-weight: 600;
}
progress[value] {
  /* Reset the default appearance */
    -webkit-appearance: none;
    appearance: none;
    width: 120px;
    height: 12px;
    padding-left: 10px;
}
progress[value]::-webkit-progress-value {
  background-color:#3DA6D7;
    border-radius: 2px; 
    background-size: 35px 20px, 100% 100%, 100% 100%;
}

/*********************NOTA-CONTENT**************************/
.nota-content{
    padding-bottom: 40px;
}

/*texto1*/
.nota-content .texto1 {
    padding: 10px 0px;
}
.nota-content .texto1 h3{
    font-family: "raleway";
    font-weight: bold;
    font-size: 20px;
    text-align: left;
}
.nota-content .texto1 p{
    font-size: 16px;
    line-height: normal;
    color: grey;
    padding-top: 10px;
    text-align: left;
}

/*texto1r*/
.nota-content .texto1r {
    padding: 10px 0px;
}
.nota-content .texto1r h3{
    font-family: "raleway";
    font-weight: bold;
    font-size: 20px;
    text-align: right;
}
.nota-content .texto1r p{
    font-size: 16px;
    line-height: normal;
    color: grey;
    padding-top: 10px;
    text-align: right;
}

/*texto1c*/
.nota-content .texto1c {
    padding: 10px 0px;
}
.nota-content .texto1c h3{
    font-family: "raleway";
    font-weight: bold;
    font-size: 20px;
    text-align: center;
}
.nota-content .texto1c p{
    font-size: 16px;
    line-height: normal;
    color: grey;
    padding-top: 10px;
    text-align: center;
}

/*texto2*/
.nota-content .texto2 {
    padding: 10px 0px;
}
.nota-content .texto2 h3{
    font-family: "raleway";
    font-weight: bold;
    font-size: 20px;
    text-align: left;
}
.nota-content .texto2 p{
    font-size: 16px;
    line-height: normal;
    color: grey;
    padding-top: 10px;
    text-align: left;
}

/*texto2r*/
.nota-content .texto2r {
    padding: 10px 0px;
}
.nota-content .texto2r h3{
    font-family: "raleway";
    font-weight: bold;
    font-size: 20px;
    text-align: right;
}
.nota-content .texto2r p{
    font-size: 16px;
    line-height: normal;
    color: grey;
    padding-top: 10px;
    text-align: right;
}

/*texto3*/
.nota-content .texto3 {
    padding: 10px 0px;
}
.nota-content .texto3 h3{
    font-family: "raleway";
    font-weight: bold;
    font-size: 20px;
    text-align: left;
}
.nota-content .texto3 h4{
    font-family: "raleway";
    font-weight: bold;
    font-size: 18px;
    text-align: left;
    color: grey;
}
.nota-content .texto3 p{
    font-size: 16px;
    line-height: normal;
    color: grey;
    padding-top: 10px;
    text-align: left;
}
/*texto3r*/
.nota-content .texto3r {
    padding: 10px 0px;
}
.nota-content .texto3r h3{
    font-family: "raleway";
    font-weight: bold;
    font-size: 20px;
    text-align: right;
}
.nota-content .texto3r h4{
    font-family: "raleway";
    font-weight: bold;
    font-size: 18px;
    text-align: right;
    color: grey;
}
.nota-content .texto3r p{
    font-size: 16px;
    line-height: normal;
    color: grey;
    padding-top: 10px;
    text-align: right;
}
/*texto3c*/
.nota-content .texto3c {
    padding: 10px 0px;
}
.nota-content .texto3c h3{
    font-family: "raleway";
    font-weight: bold;
    font-size: 20px;
    text-align: center;
}
.nota-content .texto3c h4{
    font-family: "raleway";
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    color: grey;
}
.nota-content .texto3c p{
    font-size: 16px;
    line-height: normal;
    color: grey;
    padding-top: 10px;
    text-align: center;
}

/*texto4*/
.nota-content .texto4 {
    padding: 10px 0px;
}
.nota-content .texto4 p{
    font-size: 20px;
    line-height: normal;
    color: black;
    font-weight: bold;
    padding: 15px 0px;
    text-align: left;
    border-top:1px solid grey;
    border-bottom:1px solid grey;
}

/*texto4r*/
.nota-content .texto4r {
    padding: 10px 0px;
}
.nota-content .texto4r p{
    font-size: 20px;
    line-height: normal;
    color: black;
    font-weight: bold;
    padding: 15px 0px;
    text-align: right;
    border-top:1px solid grey;
    border-bottom:1px solid grey;
}
/*texto4c*/
.nota-content .texto4c {
    padding: 10px 0px;
}
.nota-content .texto4c p{
    font-size: 20px;
    line-height: normal;
    color: black;
    font-weight: bold;
    padding: 15px 0px;
    text-align: center;
    border-top:1px solid grey;
    border-bottom:1px solid grey;
}
/*texto5*/
.nota-content .texto5 {
    padding: 10px 0px;
}
.nota-content .texto5 h3{
    font-family: "raleway";
    font-weight: bold;
    font-size: 20px;
    text-align: left;
    padding-top: 10px;
}
.nota-content .texto5 p{
    font-size: 16px;
    line-height: normal;
    color: grey;
    padding-top: 10px;
    text-align: left;
}
.nota-content .texto5 img{
    text-align: left;
    border-radius: 50%;
}

.nota-content .texto5 #button{
    text-align: left;
    background-color: black;
    color: white;
    font-weight: 600;
    font-size: 12px;
    padding: 10px 50px;
    letter-spacing: 2px;
}
/*texto5r*/
.nota-content .texto5r {
    padding: 10px 0px;
}
.nota-content .texto5r h3{
    font-family: "raleway";
    font-weight: bold;
    font-size: 20px;
    text-align: left;
    padding-top: 40px;
}
.nota-content .texto5r p{
    font-size: 16px;
    line-height: normal;
    color: grey;
    padding-top: 10px;
    text-align: left;
}
.nota-content .texto5r img{
    text-align: right;
    border-radius: 50%;
}

.nota-content .texto5r #button{
    text-align: left;
    background-color: black;
    color: white;
    font-weight: 600;
    font-size: 12px;
    padding: 10px 50px;
    letter-spacing: 2px;
}
/*texto5rb*/
.nota-content .texto5rb {
    padding: 10px 0px;
}
.nota-content .texto5rb h3{
    font-family: "raleway";
    font-weight: bold;
    font-size: 20px;
    text-align: left;
    padding-top: 40px;
}
.nota-content .texto5rb p{
    font-size: 16px;
    line-height: normal;
    color: grey;
    padding-top: 10px;
    text-align: left;
}
.nota-content .texto5rb img{
    text-align: right;
    border-radius: 50%;
}
.nota-content .texto5rb #button{
    text-align: left;
    background-color: black;
    color: white;
    font-weight: 600;
    font-size: 12px;
    padding: 10px 50px;
    letter-spacing: 2px;
}

/*texto6*/
.nota-content .texto6 {
    padding: 10px 0px;
}
.nota-content .texto6 h3{
    font-family: "raleway";
    font-weight: bold;
    font-size: 20px;
    text-align: left;
    padding-top: 10px;
}
.nota-content .texto6 #up h3{
    font-family: "raleway";
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    color: white;
    padding-top: 10px;
}
.nota-content .texto6 #up h4{
    font-family: "raleway";
    font-weight: 300;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    color: white;
}
.nota-content .texto6 #up i{
    padding-top: 35px;
    color: white;
}
.nota-content .texto6 p{
    font-size: 16px;
    line-height: normal;
    color: grey;
    padding-top: 10px;
    text-align: left;
}
.nota-content .texto6 #quote .fa-fondo{
    font-size: 240px;
    color: #3DA6D7;
}
.nota-content .texto6 #quote #down{
    position: absolute;
    z-index: 0;
}
.nota-content .texto6 #quote #up{
    position: absolute;
    z-index: 10;
    text-align: center;
    padding-left: 22px;
}

    

/*num1*/
.nota-content .num1 {
    padding: 10px 0px;
}
.nota-content .num1 #celda{
    border: 1px solid #3DA6D7;
    text-align: center;
    height: 200px;
}
.nota-content .num1 #celda span{
    color: #3DA6D7;
    font-size: 50px;
    font-weight: bold;
}
.nota-content .num1 h3{
    font-family: "raleway";
    font-weight: bold;
    font-size: 20px;
    text-align: left;
    padding-bottom: 15px;
}
.nota-content .num1 p{
    font-size: 14px;
    line-height: normal;
    color: grey;
    padding-top: 10px;
    text-align: center;
}
/*num2*/
.nota-content .num2 {
    padding: 10px 0px;
}
.nota-content .num2 #celda{
    border: 1px solid #3DA6D7;
    background-color: #E5F5F9;
    text-align: center;
    height: 200px;
}
.nota-content .num2 #celda span{
    color: #3DA6D7;
    font-size: 50px;
    font-weight: bold;
}
.nota-content .num2 h3{
    font-family: "raleway";
    font-weight: bold;
    font-size: 20px;
    text-align: left;
    padding-bottom: 15px;
}
.nota-content .num2 p{
font-size: 14px;
    line-height: normal;
    color: #3DA6D7;
    padding-top: 10px;
    text-align: center;
    font-weight: bold;
}
/*num3*/
.nota-content .num3 {
    padding: 10px 0px;
}
.nota-content .num3 #celda{
    border: 1px solid #3DA6D7;
    background-color: #3DA6D7;
    text-align: center;
    height: 200px;
}
.nota-content .num3 #celda span{
    color: white;
    font-size: 50px;
    font-weight: bold;
}
.nota-content .num3 h3{
    font-family: "raleway";
    font-weight: bold;
    font-size: 20px;
    text-align: left;
    padding-bottom: 15px;
}
.nota-content .num3 p{
    font-size: 14px;
    line-height: normal;
    color: white;
    padding-top: 10px;
    text-align: center;
}
/*num4*/
.nota-content .num4 {
    padding: 10px 0px;
}
.nota-content .num4 #celda{
    border: 1px solid #F2F2F2;
    background-color: #F2F2F2;
    text-align: left;
    height: 160px;
}
.nota-content .num4 #celda span{
    color: black;
    font-size: 50px;
    font-weight: bold;
}
.nota-content .num4 h3{
    font-family: "raleway";
    font-weight: bold;
    font-size: 20px;
    text-align: left;
    padding-bottom: 15px;
}
.nota-content .num4 p{
    font-size: 14px;
    line-height: normal;
    color: black;
    padding-top: 10px;
    text-align: left;
}
/*num5*/
.nota-content .num5 {
    padding: 10px 0px;
}
.nota-content .num5 #celda{
    border: 1px solid #3DA6D7;
    text-align: center;
    height: 200px;
}
.nota-content .num5 #celda span{
    color: #3DA6D7;
    font-size: 50px;
    font-weight: bold;
}
.nota-content .num5 h3{
    font-family: "raleway";
    font-weight: bold;
    font-size: 20px;
    text-align: left;
    padding-bottom: 15px;
}
.nota-content .num5 p{
    font-size: 14px;
    line-height: normal;
    color: grey;
    padding-top: 10px;
    text-align: center;
}
/*num6*/
.nota-content .num6 {
    padding: 10px 0px;
}
.nota-content .num6 #celda{
    border: 1px solid black;
    background-color: #F2F2F2;
    text-align: center;
    height: 200px;
}
.nota-content .num6 #celda span{
    color: black;
    font-size: 50px;
    font-weight: bold;
}
.nota-content .num6 h3{
    font-family: "raleway";
    font-weight: bold;
    font-size: 20px;
    text-align: left;
    padding-bottom: 15px;
}
.nota-content .num6 p{
    font-size: 14px;
    line-height: normal;
    color: black;
    padding-top: 10px;
    text-align: left;
}
/*num7*/
.nota-content .num7 {
    padding: 10px 0px;
}
.nota-content .num7 #celda{
    border: 10px solid white;
    background-color: #F2F2F2;
    text-align: left;
    height: 220px;
}
.nota-content .num7 #celda span{
    color: black;
    font-size: 50px;
    font-weight: bold;
}
.nota-content .num7 h3{
    font-family: "raleway";
    font-weight: bold;
    font-size: 20px;
    text-align: left;
    padding-bottom: 15px;
}
.nota-content .num7 p{
    font-size: 14px;
    line-height: normal;
    color: grey;
    padding-top: 10px;
    text-align: left;
}
/*num8*/
.nota-content .num8 {
    padding: 10px 0px;
}
.nota-content .num8 #celda{
    border: 1px solid #F2F2F2;
    background-color: #F2F2F2;
    text-align: left;
    height: 160px;
}
.nota-content .num8 #celda span{
    color: black;
    font-size: 50px;
    font-weight: bold;
}
.nota-content .num8 h3{
    font-family: "raleway";
    font-weight: bold;
    font-size: 20px;
    text-align: left;
}
.nota-content .num8 h4{
    font-family: "raleway";
    font-weight: bold;
    font-size: 16px;
    text-align: left;
    color: grey;
    padding-bottom: 15px;
}
.nota-content .num8 p{
    font-size: 14px;
    line-height: normal;
    color: black;
    padding-top: 10px;
    text-align: left;
}

/*separador1*/
.nota-content .separador1 {
    padding: 10px 0px;
}
/*separador2*/
.nota-content .separador2 {
    padding: 10px 0px;
}
.nota-content .separador2 #imgbg{
    width: 100%;
    height: 300px;
    background-size: 100% 100%;
    background-image: url('../images/blog/banner-mesaza.jpg');
}

.nota-content .separador2 #imgbg h2{
    text-align: left;
    font-size: 38px;
    text-shadow: black 1px 1px;
    color: white;
    padding: 5% 20%;
}

/*separador1*/
.nota-content .separador3 {
    padding: 10px 0px;
}
.nota-content .separador3 #border{
    border-top: 1px solid grey;
    border-bottom: 1px solid grey;
    padding-bottom: 5px;
}
/*separador4*/
.nota-content .separador4 {
    padding: 10px 0px;
}
.nota-content .separador4 #cita{
    border-top: 1px solid #F2F2F2;
    border-bottom: 1px solid #F2F2F2;
    padding: 15px 0px;
}
.nota-content .separador4 #cita p{
    color: black;
    font-size: 24px;
    font-weight: bold;
    line-height: 32px;
}
.nota-content .separador4 #cita h3{
    color: grey;
    font-size: 18px;
    font-weight: 300;
}
.nota-content .separador4 #cita i{
    color: grey;
    float: right;
}
/*separador5*/
.nota-content .separador5 {
    padding: 10px 0px;
}
.nota-content .separador5 #cita{
    border-top: 1px solid #F2F2F2;
    border-bottom: 1px solid #F2F2F2;
    padding: 15px 0px;
    background-color: #F2F2F2;
}
.nota-content .separador5 #cita p{
    color: black;
    font-size: 24px;
    font-weight: bold;
    line-height: 32px;
}
.nota-content .separador5 #cita h3{
    color: black;
    font-size: 18px;
    font-weight: 300;
}
.nota-content .separador5 #cita i{
    color: black;
    float: right;
}
/*separador6*/
.nota-content .separador6 {
    padding: 10px 0px;
}
.nota-content .separador6 #tiempo{
    border-top: 1px solid #F2F2F2;
    border-bottom: 1px solid #F2F2F2;
    background-color: #3DA6D7;
    text-align: center;
    padding: 10px 0px;
}
.nota-content .separador6 #tiempo h3{
    color: white;
    font-size: 24px;
    font-weight: bold;
}
.nota-content .separador6 #tiempo span{
    color: white;
    font-size: 24px;
    font-weight: 200;
}
.nota-content .separador6 #tiempo i{
    color: black;
    padding-right: 20px;
}
/*separador7*/
.nota-content .separador7 {
    padding: 10px 0px;
}


/******************VER TODO**********************/
.ver-todo a p{
    font-size: 20px;
    text-align: center;
    font-weight: 500;
    margin: 20px 0px;
    color: black;
    text-decoration: none;
}
.ver-todo a p span{
    font-size: 22px;
    color: #1794CF !important;
}
.contactate p{
    font-size: 20px;
    text-align: center;
    font-weight: 500;
    margin: 20px 0px;
    color: black;
    text-decoration: none;
}
.contactate p a{
    color: #1794CF !important;
    text-decoration: none;
}
.contactate i{
    color: #1794CF !important;
}

/******************Categorias**********************/
.categorias {
    background-color: #F5F5F5;
    display: inline-block;
}
.categorias .categoria {
    display: inline-block;
    font-size: 12px;
    font-weight: 400;
    padding: 12px 50px;
    color: grey;
    margin: 0px 0px;
    border-right: 1px solid #DFDFDF;
}
.cat-on{   
    color: #1794CF !important;
    font-weight: 600 !important;
    border-bottom: 3px solid #1794CF !important;
}

/******************FOOTER**********************/
#footer-nota{
    background-color: #E6E6E6;
    padding-bottom: 50px;
}
#footer-nota p{
    color: black;
    font-weight: bold;
    padding: 20px 0px;
    border-bottom: 1px solid grey;
}
#footer-nota a{
    text-decoration: none;
    color: grey;
    font-size: 13px;
    font-weight: bold;
}

#notab{
    background-color: white;
    padding: 10px 10px;
    border-left: 5px solid #E6E6E6;
    border-right: 5px solid #E6E6E6;
    border-top: 10px solid #E6E6E6;
}
#notas-posibles p {
    color: black;
    font-weight: bold;
    padding: 4px 0px;
    border-bottom: 0px solid grey;
}

/***************IMAGENES HEADER*******************/

/***************RESPONSIVE*******************/

/*Responsive Layouts*/
@media screen and (max-width: 1024px){
}
@media screen and (max-width: 767px){
    .titulo #experiencia #tiempo{
        display: block !important;
    }
    .titulo #experiencia #nivel{
    display: block !important;
    padding-left: 0px !important;
    padding: 0px 0px !important;
    }
    progress[value] {
  /* Reset the default appearance */
    -webkit-appearance: none;
    appearance: none;
    width: 120px;
    height: 12px;
    padding-top: 5px;
    padding-left: 0px !important;
    }
    .nota-content .separador2 #imgbg h2{
    text-align: center;
    font-size: 40px;
    text-shadow: black 1px 1px;
    color: white;
    padding-top: 9%;
    }
.titulo #experiencia #nivel i {
    padding-right: 5px;
    border-left: 0px solid grey !important;
    padding-left: 0px !important;
}
.nota-content .separador6 #tiempo h3 {
    color: white;
    font-size: 18px;
    font-weight: bold;
}
#notab {
    background-color: white;
    padding: 10px 10px 90px 10px;
    border-left: 5px solid #E6E6E6;
    border-right: 5px solid #E6E6E6;
    border-top: 10px solid #E6E6E6;
}
.categorias .categoria {
    padding: 0px 2px !important;
}
}
@media screen and (max-width: 544px){
        .titulo #experiencia #tiempo{
        display: block !important;
    }
    .titulo #experiencia #nivel{
    display: block !important;
    padding-left: 0px !important;
    padding: 0px 0px !important;
    }
    progress[value] {
  /* Reset the default appearance */
    -webkit-appearance: none;
    appearance: none;
    width: 120px;
    height: 12px;
    padding-top: 5px;
    padding-left: 0px !important;
    }
    .nota-content .separador2 #imgbg h2{
    text-align: center;
    font-size: 40px;
    text-shadow: black 1px 1px;
    color: white;
    padding-top: 9%;
    }   
    .titulo #experiencia #nivel i {
    padding-right: 5px;
    border-left: 0px solid grey !important;
    padding-left: 0px !important;
}
.nota-content .separador6 #tiempo h3 {
    color: white;
    font-size: 18px;
    font-weight: bold;
}
#notab {
    background-color: white;
    padding: 10px 10px 90px 10px;
    border-left: 5px solid #E6E6E6;
    border-right: 5px solid #E6E6E6;
    border-top: 10px solid #E6E6E6;
}

.categorias .categoria {
    padding: 0px 2px !important;
}
}
@media screen and (max-width: 479px){
    .titulo #experiencia #tiempo{
    display: block !important;
    }
    .titulo #experiencia #nivel{
    display: block !important;
    padding-left: 0px !important;
    padding: 0px 0px !important;
    }
    progress[value] {
  /* Reset the default appearance */
    -webkit-appearance: none;
    appearance: none;
    width: 120px;
    height: 12px;
    padding-top: 5px;
    padding-left: 0px !important;
    }
    .nota-content .separador2 #imgbg h2{
    text-align: center;
    font-size: 40px;
    text-shadow: black 1px 1px;
    color: white;
    padding-top: 20%;
    }
    .titulo #experiencia #nivel i {
    padding-right: 5px;
    border-left: 0px solid grey !important;
    padding-left: 0px !important;
}
.nota-content .separador6 #tiempo h3 {
    color: white;
    font-size: 18px;
    font-weight: bold;
}
#notab {
    background-color: white;
    padding: 10px 10px 90px 10px;
    border-left: 5px solid #E6E6E6;
    border-right: 5px solid #E6E6E6;
    border-top: 10px solid #E6E6E6;
}

.categorias .categoria {
    padding: 0px 2px !important;
}
}