/*--

    Theme Name: Jharle
    Theme URI: www.jharle.edu.pe/
    Author: Studioh
    Author URI: http://www.studioh.pe
    Description: Design by Studioh.pe
    Version: 5.0
    Tags:  
    License: 
    License URI: 

--*/

/*/TIPOGRAFIA/*/

img.map {
    width: 255px;
}
@font-face {
    font-family: 'Harabara-Mais-Demo';
    src:url('font/Harabara-Mais-Demo.ttf.woff') format('woff'),
        url('font/Harabara-Mais-Demo.ttf.svg#Harabara-Mais-Demo') format('svg'),
        url('font/Harabara-Mais-Demo.ttf.eot'),
        url('font/Harabara-Mais-Demo.ttf.eot?#iefix') format('embedded-opentype'); 
        font-weight: normal;
        font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;700&display=swap');


/*-----------------------------------------------------------------------------------*/
/*  GENERAL
/*-----------------------------------------------------------------------------------*/

.clientes-owl .owl-item {
    display: flex;
    align-content: center;
    height: 100%;
}

.clientes-owl .owl-item > * {
    display: flex;
    margin: auto;
    align-content: center;
    height: 190px;
}
body::-webkit-scrollbar {
    width: 12px;
}
 
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0.3);
}
 
body::-webkit-scrollbar-thumb {
  background-color: #e5ae0c;
  outline: 1px solid white;
}

body {
    color: #555;
    font-family: 'Roboto', sans-serif;

}


::selection {

    background: #e5ae0c;
    color: #111111;
    text-shadow: none;

}


::-moz-selection {
    background: #e5ae0c;
    color: #111111;
    text-shadow: none;

}


button:focus, button {
    outline: none;
}

a {

  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;

}


a:hover{

  color: black;

}


input::-moz-focus-inner {

  border: 0;

}
.owl-1 img, .owlasd img{
    max-width: 100%;
}
.owlasd{
    padding: 100px 0;
}
.middle{
      display: flex;
    -ms-display: flex;
    display: flex;
    align-items: center;
}

a:hover, a:active, a:focus {

  text-decoration: none;

  outline: none;

}

.h50 {
    height: 250px;
    height: 50vh;
}
.h100 {
    height: 630px;
    height: 100vh;
}

h1, h2, h3, h4, h5, h6 {

color: white;
position: relative;
font-weight: 400;

}


button{
    padding: 0;
    border: 0;
    background: inherit;
}


input, select {
  border: none;
  outline: none;
}


th {
  border-width: 0 1px 1px 0;
}


td {
  border-width: 0 1px 1px 0;
}


p {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 17px;
    line-height: 1.7;
}

.no-over{overflow: hidden;}

.text-justify {text-align: justify;}

.margin-t100{margin-top: 100px;}

.margin-t50{margin-top:50px;}

.margin-b50{margin-bottom: 50px}

.margin-b100{margin-bottom: 100px}

.margin-b25{margin-bottom: 25px;}

.display-none{display: none;}

.no-padding {padding: 0;}

.no-margin {margin: 0;}

.white-text{color:white;}


@-webkit-keyframes pulse {
  0% {
    opacity: 0.5;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.25);
            transform: scale(1.25);
  }
  100% {
    opacity: 0.5;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes pulse {
  0% {
    opacity: 0.5;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.25);
            transform: scale(1.25);
  }
  100% {
    opacity: 0.5;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
}
@keyframes spin {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
}
@-webkit-keyframes slide {
  from {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  to {
    -webkit-transform: translateX(18px);
            transform: translateX(18px);
  }
}
@keyframes slide {
  from {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  to {
    -webkit-transform: translateX(18px);
            transform: translateX(18px);
  }
}
@-webkit-keyframes fadeIn {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes fadeOut {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
}
@-webkit-keyframes pulseWave {
  25% {
    box-shadow: 0 0 0 0 rgba(26,26,26,0.5);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(26,26,26,0);
  }
}
@keyframes pulseWave {
  25% {
    box-shadow: 0 0 0 0 rgba(26,26,26,0.5);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(26,26,26,0);
  }
}


/*-----------------------------------------------------------------------------------*/
/*  CLIENTE - JHARLE
/*-----------------------------------------------------------------------------------*/

.text-middle {
    display: table-cell;
    vertical-align: bottom;
    position: relative;
}

.text-slide {
    display: table;
    width: 100%;
    text-align: left;
    margin: 0px;
    padding: 0px;
}

.titulo-slide {
    font-size: 60px;       
    font-weight: 900;
}

.yellow{
  color: #e5af0c;
}

.btn-cta {
    background: #e5af0c;
    color: #fff;
    padding: 6px 15px;
    font-size: 17px;
    font-weight: 600;
    border-radius: 5px;
    z-index: 9;
}




/*-----------------------------------------------------------------------------------*/
/*  HEADER
/*-----------------------------------------------------------------------------------*/

.menu-jharle {
    padding: 10px 0;
    margin: 0;
    position: fixed;
    width: 100%;
    z-index: 10;
}

.logo img {
    width: 180px;
}
.stick .logo img {
    width: 130px;
}

.main-menu li a {
    color: white;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Raleway', sans-serif;
    padding: 24px 0;
    text-transform: uppercase;
}

.main-menu li a:hover {
    color: #e5af0c;
}

.main-menu .current-menu-item a {
    color: #e5af0c!important;
}


.main-menu {
    padding: 0;
    list-style: none;
    margin: 0;
    display: inline-block;
}

.main-menu li {
    display: inline-block;
    margin-left: 15px;
    position: relative;
    padding-left: 20px;
}

header.stick {
position: fixed;
      background: #111111;
    width: 100%;
  }

.stick.fadeInDown2 {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}



/*-----------------------------------------------------------------------------------*/
/*  FOOTER
/*-----------------------------------------------------------------------------------*/
.copyright {
    font-size: 13px;
    color: white;
    margin: 0;
}

.footer-copy {
    background: #0b0b0b;
    color: white;
    padding: 10px 0;
}

.footer-jharle {
    background: #111111;
    color: white;  
    padding-bottom: 50px; 
        padding-top: 50px;
}



.footer-jharle p {
    font-size: 14px;
    padding-bottom: 10px;
    margin-bottom: 4px;
    border-bottom: 0.5px solid #ffffff75;
}

.footer-jharle h4 {
    color: white;
        margin-bottom: 30px;
}

.logo-footer {
    width: 65px;
}

/*-----------------------------------------------------------------------------------*/
/*  HOME
/*-----------------------------------------------------------------------------------*/

.bg-home {
    min-height: 100vh;
    width: 100%;
    background-size: cover;
    position: relative;
    background-position: center;
}


.capa-gr {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #61616185;
}


.about-us img {
    width: 80%;
}


.about-us h2 {
    color: #e5ae0c;
    text-transform: uppercase;
    font-family: roboto;
    font-weight: 600;
    margin: 10px 0 30px;
}

.about-us span {
    color: #db803f;
    font-size: 20px;
    font-weight: 400;
}

.about-us p {
    text-align: justify;
    color: #555;
    font-size: 16px;
}

.about-us {
    padding: 80px 0;
}

.sc-partners {
    padding: 50px 0 20px;
    background: whitesmoke;
}
.content-area input {
    border: 1px solid #adadad;
    margin: 3px 0;
    border-radius: 5px;
    padding: 9px;
    width: 100%;
}

.content-area {
}

.textarea-form textarea {
    height: 80px;
    border: 1px solid #adadad;
    margin: 3px 0;
    border-radius: 5px;
    padding: 9px;
    width: 100%;
    outline: none;
}

.content-area input[type=submit] {
    background: #111111;
    color: white;
}
.sc-partners img {
    height: auto;
    max-width: 200px;
    margin: auto;
}

.sc-partners h2 {
    color: #e5ae0c;
    text-transform: uppercase;
    margin-bottom: 50px;
}

.sc-logros {
    padding: 60px 0;
    background: #111111;
}
.box-services h4 {
    color: #e3a516;
    font-family: Roboto;
    font-weight: 600;
}
.sc-logros img {
    width: 40%;
}

.sc-logros p {
    color: white;
    font-size: 18px;
}

.sc-logros h2 {
    color: #e5ae0c;
    text-transform: uppercase;
    margin-bottom: 50px;
}

.sc-services h2 {
    color: #e5ae0c;
    text-transform: uppercase;
    font-weight: 600;
    margin: 10px 0 10px;
}

.sc-services span {
    color: #db803f;
    font-size: 20px;
    font-weight: 400;
}

.box-services img {
    width: 100%;
    height: 160px;
    border-radius: 5px 5px 0 0;
    margin-bottom: 14px;
    border-bottom: 3px solid #e5af0c;
    
}
.page-id-146 .box-detail-course {
    display: none;
}
.box-services h4 {
    padding: 0 10px;
    color: #db803f;
    font-size: 20px;
}

.box-services {
    border: 3px solid #e5af0c;
    border-radius: 8px;
    margin-top: 50px;
    padding-bottom: 30px;
}

.sc-services {
    padding: 80px 0;
}

.box-services p {
    padding: 0 30px;
    font-size: 16px;
    min-height: 54px;
}

.btn-cta2 {
    background: #db803f;
    color: #fff;
    padding: 6px 15px;
    font-size: 17px;
    font-weight: 600;
    border-radius: 5px;
    z-index: 9;
    margin-bottom: 50px;
}

.sc-blog h2 {
    color: #e5ae0c;
    text-transform: uppercase;
    font-weight: 600;
    margin: 10px 0 0px;
}

.sc-blog span {
    color: #db803f;
    font-size: 20px;
    font-weight: 400;
}

.sc-blog {
    padding: 90px 0;
}

.sc-blog p {
    font-size: 16px;
}

.sc-blog img {
    width: 100%;
    border-radius: 15px;
}

.sc-blog h5 {
    font-family: roboto;
    color: #555;
    margin-top: 25px;
}

.sc-blog h3 {
    color: #efc450;
    font-family: roboto;
    font-weight: 600;
    font-size: 24px;
    margin-bottom: 25px;
}

.btn-cta3 {
    background: #db803f;
    color: #fff;
    padding: 6px 15px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 5px;
    z-index: 9;
}


/*-----------------------------------------------------------------------------------*/
/*  CONTACTO
/*-----------------------------------------------------------------------------------*/


.pc-formulario input[type=submit] {
    width: 120px;
    margin: 16px 0px;
    font-size: 14px;
    padding: 8px 0;
    background: #db803f;
    border: 0;
    color: #ffffff;
}

.pc-formulario input {
    padding: 8px 20px 8px 20px;
    margin: 10px auto;
    display: block;
    width: 100%;
    background: #ffffff;
    color: #555;
    border-radius: 5px;
    border: 1px solid #db803f;
}


.pc-formulario textarea {
    padding: 8px 20px 8px 20px;
    margin: 10px auto;
    display: block;
    width: 100%;
    height: 160px;
    outline: none;
    background: #ffffff;
    color: #555;
    border-radius: 5px;
    border: 1px solid #db803f;
}

.pg-contacto {
       padding-top: 180px;
    background-size: cover;
    background-position: bottom;
    position: relative;
}

.form-ct {
    padding: 90px 0;
}

.form-ct span {
    color: #db803f;
    font-size: 20px;
    font-weight: 400;
}

.form-ct h2 {
    color: #555;
    text-transform: uppercase;
    font-family: roboto;
    font-weight: 600;
    margin: 10px 0 50px;
}

.box-sedes {
    border-radius: 15px;
    padding: 30px 0;
    background: linear-gradient(40deg, #db803f, #e5ae0c);
    margin: 0 10px;
}

.box-sedes p {
    margin: 0px;
    color: white;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 10px;
    border-bottom: 1px solid #ffffff85;
    padding: 10px 20px;
}
.box-sedes small {
    margin-bottom: 5px;
    display: block;
}
.content_cta {
    padding: 40px;
    color: black;
    font-weight: 500;
}

te {}

.cta_sila {
    max-width: 90%;
    border-radius: 55px;
    margin: 30px auto;
    overflow: hidden;
    background: linear-gradient(45deg, #e9b614, #db803f);
    border: 1px solid #00000094;
}

.content_cta h4 {
    font-size: 30px;
    font-weight: 600;
    color: #111111;
}

.content_cta a {
    display: block;
    color: black;
    text-decoration: underline;
}

.content_cta b {
    display: block;
}
.box-sedes h4 {
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.ct-jharle {
    padding: 80px 0 0;
}

.ct-jharle img {
    width: 100%;
    margin: 80px 0;
}

.ct-jharle h4 {
    color: #e5ae0c;
    text-transform: uppercase;
    font-family: roboto;
    font-weight: 600;
    margin: 10px 0 20px;
}


/*==============================
CURSOS - SINGLE CURSOS 
==============================*/
.modalidad {
    background: linear-gradient(45deg, #e9b614, #db803f);
    display: inline-block;
    margin: 0 0 30px 0;
    padding: 5px 17px;
    color: white;
}

.modalidad p {
    margin: 0;
}


/*=====  End of cursos  ======*/


/*-----------------------------------------------------------------------------------*/
/*  NOSOTROS
/*-----------------------------------------------------------------------------------*/

.pg-nosotros{
    padding-top: 180px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.sc-valores img {
    width: 30%;
}

.sc-valores h2 {
    text-transform: uppercase;
    color: #db803f;
    margin-bottom: 50px;
}

.sc-valores {
    padding-bottom: 50px;
}

.sc-valores p {
    font-size: 18px;
    margin-top: 20px;
    font-weight: 500;
}

/*-----------------------------------------------------------------------------------*/
/*  SERVICIOS
/*-----------------------------------------------------------------------------------*/
.pg-servicios{
    padding-top: 180px;
    background-size: cover;
    background-position: center;
    position: relative;
}
.box-detail-course .nav li > a.active {
    color: #db803f;
}

/*-----------------------------------------------------------------------------------*/
/*  SINGLE SERVICIOS
/*-----------------------------------------------------------------------------------*/
.box-detail-course .nav li.active:after {
    content: '';
    width: 80%;
    transition: 0.4s ease;
}

.box-detail-course {
    width: 100%;
    margin-top: 50px;
    background: white;
    padding: 0px 0px;
    border-radius: 5px;
    box-shadow: 0px 1px 7px 2px #b6b6b64f;
}

.box-detail-course .nav li > a {
    padding: 10px 70px 10px 40px;
    font-size: 16px;
    font-weight: 600;
    color: #728798;
    background: inherit;
    cursor: pointer;
}

.box-detail-course .nav {
    padding: 0;
    border-bottom: 1px solid #e7e7e7;
    background: #fafbff;
    margin: 0;
    height: inherit;
}

.box-detail-course .nav li.active:after {content: '';width: 80%;transition: 0.4s ease;}

.box-detail-course .nav li.active a {
    color: #db803f;
}

.box-detail-course .nav li:after {
    width: 0;
    content: '';
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 10%;
    transition: 0.4s ease;
    background: #db803f;
}
.box-detail-course .nav li {
    padding: 10px 0px;
}

.box-detail-course .nav li:before {content: '';position: absolute;right: 0;height: 60%;width: 1px;background: #dfdfdf;top: 20%;}

.box-detail-course .nav li > a:before {
  
    content:"\f0d7";
    position: absolute;
    font-family: FontAwesome;
    right: 8px;
    background: white;
    width: 14px;
    height: 14px;
    box-shadow: 0px 1px 2px 1px #bdbdbd8c;
    top: 40%;
    font-size: 12px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 50%;
}

.box-detail-course .nav li.active > a:before {
    content:"\f0d8";
    
}
/*/Fin detail course /*/
.tab-content {
  border-bottom: 1px solid #dedde1;
  border-right: 1px solid #dedde1;
  border-left: 1px solid #dedde1;
  padding: 30px;
}
.nav-tabs > li > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
   
    border-image: none;
    border-radius: 0;
    cursor: default;
}
.cta-area a {
    margin-right: 20px;
}
.box-detail-course h4, .box-detail-course h5 i {
    margin-right: 10px;
    margin-bottom: 0px;
}

.box-detail-course hr {
    margin-top: 0;
}

.box-detail-course h4, .box-detail-course h5 i {
    margin-right: 10px;
    margin-bottom: 0px;
}

.box-detail-course hr {
    margin-top: 0;
}

a.btn-donwload {
    background: #6a4f89;
    color: white;
    padding: 8px 12px;
    border-radius: 7px;
    display: inline-block;
    padding-left: 40px;
    font-weight: 500;
    position: relative;
    letter-spacing: 0.5px;
}

a.btn-donwload:after {content: "\f019";font-family: FontAwesome;position: absolute;left: 13px;top: 2px;font-size: 20px;color: white;}

a.btn-donwload:hover {
    background: #9369c2;
}

.box-detail-course ul li {
    list-style: none;
    position: relative;
    padding-left: 20px;
    line-height: 2;
}

.box-detail-course ul li:before {
    content: "\f14a";
    font-family: FontAwesome;
    position: absolute;
    left: 0;
    top: 0px;
    color: #dc8538;
}






/*-----------------------------------------------------------------------------------*/
/*  BLOG
/*-----------------------------------------------------------------------------------*/

.pg-blog{
    padding-top: 180px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.padding-widget {
    padding-left: 40px;
}

.widget-main {
    border: 1px solid #d7d7d7;
    margin-bottom: 30px;
    padding: 0px;
}

.widget-main-title {
    background: #db803f;
    padding: 10px 10px;
    margin-bottom: 10px;
}

.widget-inner {
    padding: 10px 20px;
}


.datos-blog span {
    display: inline-block;
    margin-right: 30px;
}
.blog-list-details {
    display: flex;
    margin-bottom: 10px;
    padding-bottom: 20px;
    align-items: center;
}

.blog-list-title a {
    font-size: 14px;
    color: #555;
    margin-left: 20px;
    line-height: 1.5;
    display: block;
    font-weight: 500;
}

h5.blog-list-title {
    margin: 0;
}

.widget-main-title h3 {
    font-size: 19px;
    margin: 0;
    color: white;
    text-align: center;
}

.cat-item {
    color: #e5ae0c;
    font-size: 14px;
    padding: 5px 0;
    list-style: none;
    border-bottom: 1px solid #d7d7d7;
}

.widget-main ul {
    padding: 0 10px;
    margin: 0;
}

.cat-item a {font-weight: 600;color: #555
;}

.cat-item:last-child {
    border: 0;
}

.padding-widget {
    padding-left: 40px;
}

.widget-main {
    border: 1px solid #d7d7d7;
    margin-bottom: 30px;
    padding: 0px;
}

.widget-main-title {
    background: #db803f;
    padding: 10px 10px;
    margin-bottom: 10px;
}

.widget-inner {
    padding: 10px 20px;
}

.titulo-blog a:hover {
    color: #e5ae0c;
}


.blog-single p {
    margin-bottom: 20px;
    line-height: 1.9;
}

.blog-single h3 {
    margin-bottom: 20px;
    font-weight: 600;
    color: #555;
}
.caja-blog {
    padding: 0 40px;
}
.fecha-blog a {
    color: #db803f;
    font-size: 14px;
}
.datos-blog {padding: 20px 0 10px;border-bottom: 1px dashed #c6c6c6;margin-bottom: 20px;}

.datos-blog .autor {
    font-weight: 600;
    font-size: 14px;
}

.autor i {
    color: #e5ae0c;
}
.fecha-blog {
       margin: 10px 0 20px;
}
.text-zone h1.titulo-single-blog{
    color: white;
    font-weight: 600;
    text-align: center;
    font-size: 30px;
}
.sub-caja-blog {
    background: white;
    margin-top: -50px;
    position: relative;
    padding: 25px 30px;
}

.titulo-blog a {
    color: #555;
    font-size: 25px;
    text-transform: uppercase;
}

.attachment-blog-img {
    width: 100%;
    height: auto;
}

.type-post {
    display: table;
    margin: 0 0 50px 0;
    border-bottom: 1px solid #c8c8c8;
    padding: 0 0 30px 0;
}

.titulo-blog1 {
      line-height: 1.4;
    margin: 10px 0;
}


.text-zone h1 {
    color: white;
    font-weight: 900;
    text-align: center;
    font-size: 50px;
}

.blog-pad {
    padding: 100px 0;
}

/*-----------------------------------------------------------------------------------*/
/*  Responsive - version celulares mobile
/*-----------------------------------------------------------------------------------*/


@media (max-width: 767px) {

.xs-block{display: block;}
.xs-none{display: none;}
.text-slide {text-align: center;}
.titulo-slide {font-size: 38px;padding: 0px 10px;}
.bread {text-align: center;}



/*-----------------------------------------------------------------------------------*/
/*  Header Mobile
/*-----------------------------------------------------------------------------------*/
.header-mobile img {
width: 120px;
    position: absolute;
    top: 0;
    left: 0;
    margin: 12px 25px;
}

.nav__toggle {
  display: inline-block;
  position: absolute;
  z-index: 10;
  padding: 0;
  border: 0;
  background: transparent;
  outline: 0;
  right: 15px;
  top: 15px;
  cursor: pointer;
  border-radius: 50%;
  -webkit-transition: background-color .15s linear;
  transition: background-color .15s linear;
}
.nav__toggle:hover, .nav__toggle:focus {
  background-color: rgba(0, 0, 0, 0.5);
}
.nav__menu {
display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    height: var(--screen-height);
    position: relative;
    z-index: 5;
    visibility: hidden;
    transition: ease-out 0.8s;
    opacity: 0;
    transform: translateY(-70px);
}
.nav {
  height: 80px;
    display: inherit;
    -ms-flex-wrap: inherit;
    flex-wrap: inherit;
    padding-left: inherit;
    margin-bottom: inherit;
    list-style: inherit;
}


.nav.nav--open {
    height: auto;
}

[hidden] {
  display: inherit!important;
}
.nav__item {
opacity: 0;
    -webkit-transition: all 0.3s cubic-bezier(0, 0.995, 0.99, 1) 0.3s;
    transition: all 0.3s cubic-bezier(0, 0.995, 0.99, 1) 0.3s;
    list-style: none;
}
.nav__item:nth-child(1) {
  -webkit-transform: translateY(-40px);
          transform: translateY(-40px);
}
.nav__item:nth-child(2) {
  -webkit-transform: translateY(-80px);
          transform: translateY(-80px);
}
.nav__item:nth-child(3) {
  -webkit-transform: translateY(-120px);
          transform: translateY(-120px);
}
.nav__item:nth-child(4) {
  -webkit-transform: translateY(-160px);
          transform: translateY(-160px);
}
.nav__item:nth-child(5) {
  -webkit-transform: translateY(-200px);
          transform: translateY(-200px);
}
.nav__item a{
  color: white;
  display: block;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 1.25rem;
  text-decoration: none;
  padding: 1rem;
}
.nav__item a:hover, .nav__item a:focus {
  outline: 0;
  background-color: rgba(0, 0, 0, 0.2);
}

.menuicon {
  display: block;
  cursor: pointer;
  color: white;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.menuicon__bar, .menuicon__circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
}
.menuicon__bar {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transition: -webkit-transform .25s ease-in-out;
  transition: -webkit-transform .25s ease-in-out;
  transition: transform .25s ease-in-out;
  transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out;
}
.menuicon__circle {
  -webkit-transition: stroke-dashoffset .3s linear .1s;
  transition: stroke-dashoffset .3s linear .1s;
  stroke-dashoffset: 144.513262038;
  stroke-dasharray: 144.513262038;
}

.splash-eqival {
  position: absolute;
  top: 40px;
  right: 40px;
  width: 1px;
  height: 1px;
}
.splash-eqival::after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 50%;
  background-color: var(--splash-bg-color);
  width: 284vmax;
  height: 284vmax;
  top: -142vmax;
  left: -142vmax;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06);
  transition: -webkit-transform 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06);
  transition: transform 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06);
  transition: transform 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06), -webkit-transform 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06);
  will-change: transform;
}

.nav:target > .splash-eqival::after,
.nav--open > .splash-eqival::after {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.nav:target .menuicon,
.nav--open .menuicon {
  color: white;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.nav:target .menuicon__circle,
.nav--open .menuicon__circle {
  stroke-dashoffset: 0;
}
.nav:target .menuicon__bar:nth-child(1), .nav:target .menuicon__bar:nth-child(4),
.nav--open .menuicon__bar:nth-child(1),
.nav--open .menuicon__bar:nth-child(4) {
  opacity: 0;
}
.nav:target .menuicon__bar:nth-child(2),
.nav--open .menuicon__bar:nth-child(2) {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.nav:target .menuicon__bar:nth-child(3),
.nav--open .menuicon__bar:nth-child(3) {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.nav:target .nav__menu,
.nav--open .nav__menu {
  visibility: inherit;
    transition: ease-out 0.8s;
    opacity: 1;
    transform: translateY(100px);
    padding: 0;
}


.nav:target .nav__item,
.nav--open .nav__item {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}


.header-mobile {
  height: 5rem;
  background-color: var(--header-bg-color);
  position: fixed;
  z-index: 15;
  width: 100%;
}


:root {
  --screen-width: 100%;
  --screen-height: 100%;
  --header-bg-color: #0b0b0bb5;
  --splash-bg-color: #0b0b0b;
}



/*-----------------------------------------------------------------------------------*/
/*  Footer Mobile
/*-----------------------------------------------------------------------------------*/
.copyright {text-align: center;}

.footer-jharle {
    background: #111111;
    color: white;
    padding-bottom: 50px;
    padding-top: 50px;
    padding: 50px 25px;
}



/*-----------------------------------------------------------------------------------*/
/*  Servicios Mobile
/*-----------------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------------*/
/*  Home Mobile
/*-----------------------------------------------------------------------------------*/



.bg-home {
    background: url(http://jharle.edu.pe/wp-content/uploads/2020/04/home.png);
    min-height: 70vh;
    width: 100%;
    background-size: cover;
    position: relative;
    background-position: center;
}

.sc-services {
    padding: 80px 25px;
}

.sc-services h2 {
    color: #e5ae0c;
    text-transform: uppercase;
    font-weight: 600;
    margin: 10px 0 40px;
    font-size: 30px;
}


.sc-logros h2 {
    color: #e5ae0c;
    text-transform: uppercase;
    margin-bottom: 50px;
    font-size: 30px;
}


.sc-logros {
    padding: 60px 25px;
    background: #111111;
}

.sc-logros img {
    width: 30%;
}


.sc-logros p {
    color: white;
    font-size: 18px;
    margin: 10px 0 30px;
}


.sc-blog {
    padding: 90px 25px;
}


.sc-blog img {
    width: 100%;
    border-radius: 15px;
    margin-top: 70px;
}

.sc-blog h2 {
    color: #e5ae0c;
    text-transform: uppercase;
    font-weight: 600;
    margin: 10px 0 0px;
    font-size: 30px;
}


/*-----------------------------------------------------------------------------------*/
/*  Blog Mobile
/*-----------------------------------------------------------------------------------*/


.blog-pad {
    padding: 100px 25px;
}

img.attachment-blog-single.size-blog-single.wp-post-image {
    width: 100%;
    height: 100%;
}


/*-----------------------------------------------------------------------------------*/
/*  Nosotros Mobile
/*-----------------------------------------------------------------------------------*/

.about-us span {
    color: #db803f;
    font-size: 17px;
    font-weight: 400;
}

.about-us h2 {
    color: #e5ae0c;
    text-transform: uppercase;
    font-family: roboto;
    font-weight: 600;
    margin: 10px 0 30px;
    font-size: 30px;
}

.about-us img {
    width: 80%;
    margin: 50px 30px 20px;
}

.about-us p {
    text-align: justify;
    color: #555;
    font-size: 16px;
    margin-bottom: 30px;
}

.sc-partners {
    padding: 50px 25px 20px;
    background: whitesmoke;
}

.sc-partners h2 {
    color: #e5ae0c;
    text-transform: uppercase;
    margin-bottom: 50px;
    font-size: 30px;
}

.sc-valores h2 {
    text-transform: uppercase;
    color: #db803f;
    margin-bottom: 50px;
    font-size: 30px;
}

.sc-valores img {
    width: 30%;
    margin-top: 20px;
}

.about-us {
    padding: 80px 25px;
}

/*-----------------------------------------------------------------------------------*/
/* Contacto Mobile
/*-----------------------------------------------------------------------------------*/

.box-sedes {
    border-radius: 15px;
    padding: 30px 0;
    background: linear-gradient(40deg, #db803f, #e5ae0c);
    margin: 20px 0;
}

.form-ct {
    padding: 90px 25px;
}

.form-ct h2 {
    color: #555;
    text-transform: uppercase;
    font-family: roboto;
    font-weight: 600;
    font-size: 30px;
    margin: 10px 0 30px;
}







}/*/fin 767px /*/