* { 

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

// body{

// 	font-family: 'Montserrat', sans-serif;

//   min-height: 100%;

// }

html{

  font-family: 'Montserrat', sans-serif;

  height: 100%;

}



#contenedor-carga{

  background-color: rgba(250, 240, 245, 0.9);

  height: 100%;

  width: 100%;

  position: fixed;

  -webkit-transition: all 1s ease;

  -o-transition: all 1s ease;

  transition: all 1s ease;

  z-index: 10000;

}



#carga{

  border: 15px solid #ccc;

  border-top-color: #2675f4;

  border-top-style: groove ; 

  height: 100px;

  width: 100px;

  border-radius: 100%;

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  margin: auto;

  -webkit-animation: girar 1.5s linear infinite;

  -o-animation: girar 1.5s linear infinite;

  animation: girar 1.5s linear infinite;

}



@keyframes girar {

  from { transform: rotate(0deg);}

  to {transform: rotate(360deg);}  

}







#return-to-top {

        position: fixed;

        bottom: 20px;

        right: 20px;

        background: rgba(73, 122, 255, .8);

        width: 50px;

        height: 50px;

        display: block;

        text-decoration: none;

        -webkit-border-radius: 35px;

        -moz-border-radius: 35px;

        border-radius: 35px;

        display: none;

        -webkit-transition: all 0.3s linear;

        -moz-transition: all 0.3s ease;

        -ms-transition: all 0.3s ease;

        -o-transition: all 0.3s ease;

        transition: all 0.3s ease;

}



#return-to-top i {

    color: #fff;

    margin: 0;

    position: relative;

    left: 16px;

    top: 13px;

    font-size: 19px;

    -webkit-transition: all 0.3s ease;

    -moz-transition: all 0.3s ease;

    -ms-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

    transition: all 0.3s ease;

}



#return-to-top:hover {

    background: rgb(73, 122, 255);

}

#return-to-top:hover i {

    color: #fff;

    top: 5px;

}



@media screen and (max-width: 550px) {

  .navbar.responsive {position: relative;}



  .navbar.responsive a {

    position: absolute;

    right: 0;

    top: 0;

    float: none;

    display: block;

    text-align: center;

  }



  .navbar .switch{

    margin-top: 30px;

  }

}



.navbar{

  background-color: #283747;

  padding: 5px;

}

.dropdown:hover .dropdown-menu{

        display: block;

}

.dropdown-menu{

        margin-top: 0;
	font-size: 14px;

}



  

  /*--------------------------------------------------------------

  # Hero Section

  --------------------------------------------------------------*/

  #hero {

    width: 100%;

    position: relative;

    background: url("../img/hero-bg.png") center bottom no-repeat;

    background-size: cover;

    padding: 125px 0 120px 0;

  }

  

  @media (max-width: 991px) {

    #hero { 

      padding: 55px 0 60px 0;

    }

  }

  

  @media (max-width: 574px) {

    #hero {

      padding: 100px 0 20px 0;

    }

  }

  

  #hero .hero-img {

    width: 50%;

    float: right;

  }

  

  @media (max-width: 991px) {

    #hero .hero-img {

      width: 80%;

      float: none;

      margin: 0 auto 25px auto;

    }

  }

  

  #hero .hero-info {

    width: 50%;

    float: left;

  }

  

  @media (max-width: 991px) {

    #hero .hero-info {

      width: 80%;

      float: none;

      margin: auto;

      text-align: center;

    }

  }

  

  @media (max-width: 767px) {

    #hero .hero-info {

      width: 100%;

    }

  }

  

  #hero .hero-info h2 {

    color: #fff;

    margin-bottom: 40px;

    font-size: 48px;

    font-weight: 700;

  }

  

  #hero .hero-info h2 span {

    color: #74b5fc;

    text-decoration: underline;

  }

  

  @media (max-width: 767px) {

    #hero .hero-info h2 {

      font-size: 34px;

      margin-bottom: 30px;

    }

  }

 



  

/*--------------------------------------------------------------

# Blog Posts List

--------------------------------------------------------------*/

.blog .posts-list article {

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

    padding: 30px;

    height: 100%;

    border-radius: 10px;

    overflow: hidden;

  }

  

  .blog .posts-list .post-img {

    max-height: 240px;

    margin: -30px -30px 15px -30px;

    overflow: hidden;

  }

  

  .blog .posts-list .post-category {

    font-size: 16px;

    color: #555555;

    margin-bottom: 10px;

  }

  

  .blog .posts-list .title {

    font-size: 22px;

    font-weight: 700;

    padding: 0;

    margin: 0 0 20px 0;

  }

  

  .blog .posts-list .title a {

    color: var(--color-default);

    transition: 0.3s;

  }

  

  .blog .posts-list .title a:hover {

    color: var(--color-primary);

  }

  

  .blog .posts-list .post-author-img {

    width: 50px;

    border-radius: 50%;

    margin-right: 15px;

  }

  

  .blog .posts-list .post-author-list {

    font-weight: 600;

    margin-bottom: 5px;

  }

  

  .blog .posts-list .post-date {

    font-size: 14px;

    color: #3c3c3c;

    margin-bottom: 0;

  }

  

  /*--------------------------------------------------------------

  # Blog Details

  --------------------------------------------------------------*/

  .blog .blog-details {

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

    padding: 30px;

    border-radius: 10px;

  }

  

  .blog .blog-details .post-img {

    margin: -30px -30px 20px -30px;

    overflow: hidden;

    border-radius: 10px 10px 0 0;

  }

  

  .blog .blog-details .title {

    font-size: 28px;

    font-weight: 700;

    padding: 0;

    margin: 20px 0 0 0;

    color: var(--color-default);

  }

  

  .blog .blog-details .content {

    margin-top: 20px;

  }

  

  .blog .blog-details .content h3 {

    font-size: 22px;

    margin-top: 30px;

    font-weight: bold;

  }

  

  .blog .blog-details .content blockquote {

    overflow: hidden;

    background-color: rgba(34, 34, 34, 0.06);

    padding: 60px;

    position: relative;

    text-align: center;

    margin: 20px 0;

  }

  

  .blog .blog-details .content blockquote p {

    color: var(--color-default);

    line-height: 1.6;

    margin-bottom: 0;

    font-style: italic;

    font-weight: 500;

    font-size: 22px;

  }

  

  .blog .blog-details .content blockquote:after {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    bottom: 0;

    width: 3px;

    background-color: var(--color-secondary);

    margin-top: 20px;

    margin-bottom: 20px;

  }

  

  .blog .blog-details .meta-top {

    margin-top: 20px;

    color: #6c757d;

  }

  

  .blog .blog-details .meta-top ul {

    display: flex;

    flex-wrap: wrap;

    list-style: none;

    align-items: center;

    padding: 0;

    margin: 0;

  }

  

  .blog .blog-details .meta-top ul li+li {

    padding-left: 20px;

  }

  

  .blog .blog-details .meta-top i {

    font-size: 16px;

    margin-right: 8px;

    line-height: 0;

    color: var(--color-primary);

  }

  

  .blog .blog-details .meta-top a {

    color: #6c757d;

    font-size: 14px;

    display: inline-block;

    line-height: 1;

  }

  

  .blog .blog-details .meta-bottom {

    padding-top: 10px;

    border-top: 1px solid rgba(34, 34, 34, 0.15);

  }

  

  .blog .blog-details .meta-bottom i {

    color: #555555;

    display: inline;

  }

  

  .blog .blog-details .meta-bottom a {

    color: rgba(34, 34, 34, 0.8);

    transition: 0.3s;

  }

  

  .blog .blog-details .meta-bottom a:hover {

    color: var(--color-primary);

  }

  

  .blog .blog-details .meta-bottom .cats {

    list-style: none;

    display: inline;

    padding: 0 20px 0 0;

    font-size: 14px;

  }

  

  .blog .blog-details .meta-bottom .cats li {

    display: inline-block;

  }

  

  .blog .blog-details .meta-bottom .tags {

    list-style: none;

    display: inline;

    padding: 0;

    font-size: 14px;

  }

  

  .blog .blog-details .meta-bottom .tags li {

    display: inline-block;

  }

  

  .blog .blog-details .meta-bottom .tags li+li::before {

    padding-right: 6px;

    color: var(--color-default);

    content: ",";

  }

  

  .blog .blog-details .meta-bottom .share {

    font-size: 16px;

  }

  

  .blog .blog-details .meta-bottom .share i {

    padding-left: 5px;

  }

  

  .blog .post-author {

    padding: 20px;

    margin-top: 30px;

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

    border-radius: 10px;

  }

  

  .blog .post-author img {

    max-width: 120px;

    margin-right: 20px;

  }

  

  .blog .post-author h4 {

    font-weight: 600;

    font-size: 22px;

    margin-bottom: 0px;

    padding: 0;

    color: var(--color-default);

  }

  

  .blog .post-author .social-links {

    margin: 0 10px 10px 0;

  }

  

  .blog .post-author .social-links a {

    color: rgba(34, 34, 34, 0.5);

    margin-right: 5px;

  }

  

  .blog .post-author p {

    font-style: italic;

    color: rgba(108, 117, 125, 0.8);

    margin-bottom: 0;

  }



  .why-us {

    margin-top: 80px;

    background: #2E86C1;

    margin-bottom: 80px;

    left: -10px;

  }





  .why-us .counters {

    padding-top: 20px;

  }

  

  .why-us .counters span {

    font-size: 48px;

    display: block;

    color: #fff;

  }

  

  .why-us .counters p {

    padding: 0;

    margin: 0 0 20px 0;

    font-size: 14px;

    color: #cce5ff;

  }



  .section-title {

    margin-top: 80px;

    margin-bottom: 40px;

    text-align: center;

    position: relative;

}



.line h1:before {

    position: absolute;

    bottom: -15px;

    content: "";

    width: 50px;

    margin-left: -25px;

    height: 2px;

    left: 50%;

    background: #283747;

}





/*--------------------------------------------------------------

# Features

--------------------------------------------------------------*/

#features{

  margin: 80px 0 80px 0;

}



.features .icon-box {

  display: flex;

  align-items: center;

  padding: 20px;

  background: #f5f5ff;

}



.features .icon-box i {

  font-size: 32px;

  padding-right: 10px;

  line-height: 1;

}



.features .icon-box h3 {

  font-weight: 700;

  margin: 0;

  padding: 0;

  line-height: 1;

  font-size: 16px;

}



.features .icon-box h3 a {

  color: #010483;

  transition: ease-in-out 0.3s;

}



.features .icon-box h3 a:hover {

  color: #01036f;

}



.features .icon-box:hover {

  background: #ebebff;

}



.categorias a{

    text-decoration: none;

}





/*--------------------------------------------------------------

# Breadcrumbs

--------------------------------------------------------------*/

.breadcrumbs .page-header {

  padding: 60px 0 60px 0;

  min-height: 35vh;

  position: relative;

  background-color: #1b998b;

}



@media (max-width: 768px) {

  .breadcrumbs .page-header {

    // padding: 60px 0 60px 0;

    // position: relative;

    // background-color: #1b998b;

    min-height: 20vh;

  }

}



.breadcrumbs .page-header h2 {

  font-size: 56px;

  font-weight: 500;

  color: #fff;

}



.breadcrumbs .page-header p {

  color: rgba(255, 255, 255, 0.8);

}



.breadcrumbs {

  background-color: #fafaff;

  min-height: 40px;

}



.breadcrumbs h2 {

  font-size: 24px;

  font-weight: 400;

  margin: 0;

}



.breadcrumbs ol {

  display: flex;

  flex-wrap: wrap;

  list-style: none;

  padding: 0;

  margin: 0;

  font-size: 14px;

}



.breadcrumbs ol li+li {

  padding-left: 10px;

}



.breadcrumbs ol li+li::before {

  display: inline-block;

  padding-right: 10px;

  color: #6c757d;

  content: "/";

}



// @media (max-width: 768px) {

//   .breadcrumbs .d-flex {

//     display: block !important;

//   }



//   .breadcrumbs ol {

//     display: block;

//   }



//   .breadcrumbs ol li {

//     display: inline-block;

//   }

// }





.blog-main {

  font-size: 18px;

  line-height: 1.5;

  width: 20srem;

  display: inline-block;

  padding: 10px;

  text-align: center;

  vertical-align: top;

}



 .post-img {

  height: 350px;

  width: auto;

  text-align: center;

}



.blog-title {

  font-size: 30px;

  font-weight: normal;

  color: #283747

}



.blog-description {

  font-size: 20px;

}



.blog-header {

  padding-top: 20px;

  padding-bottom: 20px;

}



.blog-info {

  margin-bottom: 20px;

  font-size: 15px;

}



.blog-main a{

  text-decoration: none;

}



.blog-main a:hover{

  text-decoration: underline;

}



// .page-content{

// justify-content: center;

// }





/*

 * Blog post

 */



 .blog-post {

  margin-bottom: 60px;

}



.blog-post-title {

  margin-bottom: 5px;

  font-size: 50px;

}



.blog-post-meta {

  margin-bottom: 20px;

  font-size: 14px;

}



 .blog-banner {

  padding-top: 20px;

  padding-bottom: 50px;

  text-align: center;

}



.blog-banner img{

	height: 100%;

  width: 70%;

  background-size: cover;

  background-repeat: no-repeat;

  background-position: center;

}



.justificar {

    text-align: justify;

}



.footer-section {

  background: #283747;

  padding: 20px 0px;

  position: absolute;

  width: 100%;

}



.footer-menu {

  list-style: none;

  float: right;

}



.footer-menu li {

  display: inline;

}



.footer-menu li a {

  display: inline-block;

  font-size: 14px;

  color: #fff;

  opacity: 0.50;

  margin-left: 40px;

  text-decoration: none;

}



.row2 {

  background-color: #f8f8f8;

  margin-top: 10px;

  min-height: 40vh;

}



.post {

  border-color: rgba(0,0,0,0.18);

  background-position: 100% 0;

  background-repeat: no-repeat;

  border-radius: 3px;

  border-style: solid;

  border-width: 1px;

  box-shadow: 0 1px 6px rgb(0 0 0 / 6%);

  margin-bottom: 24px;

}



.postprofile {

    color: #444;

    display: block;

    float: right;

    font-size: 1.3rem;

    padding: 18px;

    position: relative;

    width: 211px;

    word-wrap: break-word;

}



dl {

    display: block;

    margin-block-start: 1em;

    margin-block-end: 1em;

    margin-inline-start: 0px;

    margin-inline-end: 0px;

}



dt {

  display: block;

}



.postprofile-avatar {

    text-align: center;

    margin-bottom: 6px;

}

.postprofile-avatar, .postprofile-name, .postprofile-rank {

    line-height: 1.125;

    text-align: center;

}



.postprofile-avatar img {

    border-radius: 120px;

    border: 3px solid #FFF;

    box-shadow: 0 1px 1px rgb(0 0 0 / 30%), 0 0 1px rgb(0 0 0 / 30%);

    width: 120px;

    height: 120px;

}



.postprofile-avatar, .postprofile-name, .postprofile-rank {

    line-height: 1.125;

    text-align: center;

}



.post-head {

    background-color: rgba(0,0,0,0.03);

    border-color: #3793FF;

    border-radius: 3px 3px 0 0;

    border-style: solid;

    border-width: 0 0 1px;

    padding: 18px;

}



.postbody {

    color: #444;

    float: none;

    font-size: 1.2rem;

    margin-right: 211px;

    padding: 12px 18px 18px;

    word-break: break-word;

}

.post .post-head .topic-title {

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  display: block;

}



@media (max-width: 768px) {

  .post .post-head .topic-title {

    // white-space: nowrap;

    // overflow: hidden;

    // text-overflow: ellipsis;

    // display: block;

    font-size: 18px;

  }

}



.post-head .topic-title {

  color: #444;

  display: inline-block;

  font-size: 1.8rem;

  margin: -3px 0 3px;

  padding: 0;

  text-transform: none;

  font-weight: 400;

}



.topic-title {

  display: inline;

  text-align: left;

}



#hero-login {

  width: 100%;

  position: relative;

  // background: url("../img/hero-login.jpg") center bottom no-repeat;

  background-color: #283747;

  background-size: cover;

  padding: 50px 0 120px 0; 

}



main{

    width: 100%;

    padding: 50px; 

    margin: auto;

}



.contenedor__todo{

    width: 100%;

    max-width: 800px;

    margin: auto;

    position: relative;

}



.caja__trasera{

    width: 100%;

    padding: 10px 20px;

    display: flex;

    justify-content: center;

    -webkit-backdrop-filter: blur(10px);

    backdrop-filter: blur(10px);

    background-color: rgba(0, 128, 255, 0.5);

    border-radius: 20px;



}



.caja__trasera div{

    margin: 100px 40px;

    color: white;

    transition: all 500ms;

}





.caja__trasera div p,

.caja__trasera button{

    margin-top: 30px;

}



.caja__trasera div h3{

    font-weight: 400;

    font-size: 26px;

}



.caja__trasera div p{

    font-size: 16px;

    font-weight: 300;

}



.caja__trasera button{

    padding: 10px 40px;

    border: 2px solid #fff;

    font-size: 14px;

    background: transparent;

    font-weight: 600;

    cursor: pointer;

    color: white;

    outline: none;

    transition: all 300ms;

    border-radius: 20px;

}



.caja__trasera button:hover{

    background: #fff;

    color: #46A2FD;

}



/*Formularios*/



.contenedor__login-register{

    display: flex;

    align-items: center;

    width: 100%;

    max-width: 380px;

    position: relative;

    top: -225px;

    left: 10px;



    /*La transicion va despues del codigo JS*/

    transition: left 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);

}



.contenedor__login-register form{

    width: 100%;

    padding: 60px 20px;

    background: white;

    position: absolute;

    border-radius: 20px;

}



.contenedor__login-register form h2{

    font-size: 30px;

    text-align: center;

    margin-bottom: 20px;

    color: #46A2FD;

}



.contenedor__login-register form input{

    width: 100%;

    margin-top: 20px;

    padding: 10px;

    border: none;

    background: #F2F2F2;

    font-size: 16px;

    outline: none;

}



.contenedor__login-register .form .checkbox{

  width: 50px;



}



.contenedor__login-register form button{

    padding: 10px 40px;

    margin-top: 40px;

    border: none;

    font-size: 14px;

    background: #46A2FD;

    font-weight: 600;

    cursor: pointer;

    color: white;

    outline: none;

    border-radius: 20px;

}



.contenedor__login-register form label{

font-size: 10px;

}







.formulario__login{

    opacity: 1;

    display: block;

}

.formulario__register{

    display: none;

}







@media screen and (max-width: 850px){



    main{

        margin-top: 50px;

    }



    .caja__trasera{

        max-width: 350px;

        height: 300px;

        flex-direction: column;

        margin: auto;

    }



    .caja__trasera div{

        margin: 0px;

        position: absolute;

    }





    /*Formularios*/



    .contenedor__login-register{

        top: -10px;

        left: -5px;

        margin: auto;

    }



    .contenedor__login-register form{

        position: relative;

    }

}



.post-head .topic-date {

  border: none;

  margin: 0;

  padding: 0;

}



.post h2.topic-title a {

    max-width: 95%;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    display: block;

}





#btn-mas{

  display: none;

}

.floating-btn{

  position: fixed;

  bottom: 77px;

  right: 20px;

}

.menu a, .btn-mas label{

  display: block;

  text-decoration: none;

  background: #1b998b;

  color: #fff;

  width: 55px;

  height: 55px;

  line-height: 55px;

  text-align: center;

  border-radius: 50%;

  box-shadow: 0px 1px 10px rgba(0,0,0,0.4);

  transition: all 500ms ease;

}

.menu a:hover{

  background: #fff;

  color: #007bff;

}

.menu a{

  margin-bottom: -15px;

  opacity: 0;

  visibility: hidden;

}

#btn-mas:checked~ .menu a{

  margin-bottom: 10px;

  opacity: 1;

  visibility: visible;

}

.btn-mas label{

  cursor: pointer;

  background: #1b998b;

  font-size: 23px;

}

#btn-mas:checked ~ .btn-mas label{

  transform: rotate(135deg);

  font-size: 25px;

}



.filter {

  position: absolute;

  right: 0px;

  top: 15px;

}



// .dropdown:hover .dropdown-menu{

//   display: block;

// }

// .dropdown-menu{

//   margin-top: 0;

// }



.info-card {

  padding-bottom: 10px;

}



.subpost-card{

  margin-bottom: 30px;

  border: none;

  border-radius: 5px;

  box-shadow: 0px 0 30px rgb(1 41 112 / 10%);

}



.filter .icon {

  color: #aab7cf;

  padding-right: 20px;

  padding-bottom: 5px;

  transition: 0.3s;

  font-size: 16px;

}



.info-card .filter .dropdown-menu{

  position: absolute;

  inset: 0px 0px auto auto;

  margin: 0px;

  transform: translate(0px, 20px);

}



.card-icon {

  color: #2E86C1;

  background: #c1eeff;

}

.card-icon {

  font-size: 32px;

  line-height: 0;

  width: 64px;

  height: 64px;

  flex-shrink: 0;

  flex-grow: 0;

}



.pro-card{

    margin-bottom: 30px;

    border: none;

    border-radius: 5px;

    box-shadow: 0px 0 30px rgb(1 41 112 / 10%);

}



.profile .profile-card img {

    max-width: 120px; 

}



.pro-card{

    margin-bottom: 30px;

    border: none;

    border-radius: 5px;

    box-shadow: 0px 0 30px rgb(1 41 112 / 10%);

}



.nav-tabs-bordered .nav-link.active {

  background-color: #fff;

  color: #1b998b;

  border-bottom: 2px solid #1b998b;

}



.nav-tabs-bordered {

    border-bottom: 2px solid #ebeef4;

}



.nav-tabs-bordered .nav-link {

    margin-bottom: -2px;

    border: none;

    color: #2c384e;

}



.img-box{

  width: 400px;

  height: 300px;

  // background: #CCC;

  // overflow: hidden;

}



.img-box img{

  object-fit: cover;

  width: 100%;

  height: 100%;

}



@media (max-width: 768px) {

  .breadcrumbs .page-header .img-box{

    width: auto;

    height: auto;

    // min-height: 20vh;

  }

}



@media (max-width: 768px) {

  .postbody{

    float: none;

    font-size: 1.2rem;

    margin-right: unset;

    padding: 12px 18px 18px;

    // word-break: break-word;

  }

}