@charset "UTF-8";
@media screen and (min-width: 800px) {
  nav ul {
    background-color: transparent;
    left: 100%;
    width: 40%;
    transition: left 0.3s ease-in-out;
  }
  nav ul.active {
    left: 60%;
  }

  header {
    background: url(../images/home-science-woman.jpg) no-repeat fixed;
    background-position: 0px 60px;
    background-size: auto;
  }

  nav ul li a:hover {
    color: rgb(43, 85, 141);
  }
}
@media screen and (min-width: 1000px) {
  nav {
    width: 100%;
  }
  nav .cntd {
    margin: auto;
    width: 90%;
  }
  nav ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    position: absolute;
    right: 240px;
    left: auto;
    top: 0;
    transition: left 0.3s ease-in-out;
  }
  nav ul li {
    list-style: none;
  }

  nav ul li a {
    color: #696969;
    cursor: pointer;
    display: block;
    font-size: 1.3em;
    font-weight: 300;
    padding-top: 0;
  }

  nav ul.active {
    left: auto;
    right: 240px;
  }

  nav .navbar {
    width: 100%;
  }

  nav .navbar .btn-cotz {
    cursor: pointer;
  }
  nav .navbar .toggle {
    display: none;
  }

  header {
    background: url(../images/home-science-woman.jpg) no-repeat fixed;
    background-position: 0px 60px;
    background-size: 100%;
    height: calc(95vh - 60px);
  }
  header .title {
    bottom: calc(1em + 5vh);
    color: white;
    right: 80px;
    text-align: right;
    width: auto;
  }
  header .title .nova {
    font-size: calc(1em + 3vw);
    letter-spacing: 6px;
  }
  header .title .desc {
    margin-left: auto;
    width: 65%;
  }
  header .title .desc h1 {
    font-size: calc(1em + 2.5vw);
    font-weight: 300;
  }

  section#comentarios ul li {
    width: 33%;
  }

  section#noticias .card-i {
    display: flex;
    padding-bottom: 0;
  }
  section#noticias .card-i > div {
    width: 50%;
  }
  section#noticias .card-i .pic {
    margin-bottom: 0;
  }
  section#noticias .card-i .pic img {
    height: 100%;
  }
  section#noticias .card-i .descr {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  section#noticias .card-i .descr .title {
    font-size: 2.3em;
    font-weight: 300;
  }
  section#noticias .card-i .descr .fecha {
    font-weight: 300;
  }
  section#noticias .card-i .descr .text {
    font-size: 1.6em;
    font-weight: 300;
  }
  section#noticias .card-reverse {
    flex-direction: row-reverse;
  }
  section#galeria .card-container {
    display: flex;
    flex-flow: row wrap;
  }
  section#galeria .card-container .card-i {
    width: 33%;
  }
  section#galeria .card-container .card-i .product {
    width: 80%;
  }
  section#nosotros {
    background: url(../images/home-science-woman-blue1.jpg) no-repeat fixed;
    background-size: cover;
    margin-top: 60px;
    /*nota recordatorio: estoy dandole margen a la sección nosotros*/
  }
  section#nosotros .leyenda img {
    display: none;
  }
  section#nosotros .txtNosotros {
    margin: auto;
    position: relative;
    top: 0;
    width: 80%;
  }
  section#nosotros .txtNosotros h2 {
    font-size: 3.5em;
    font-weight: 200;
  }
  section#nosotros .txtNosotros .texto {
    font-size: 1.6em;
    font-weight: 200;
  }
  section#contacto .back {
    background-color: #5F5F5F;
    padding-top: 50px;
    padding-bottom: 50px;
  }
  section#contacto li {
    font-size: 1.2em;
  }
  section#contacto .contact-container {
    margin: auto;
    width: 90%;
  }
  section#contacto .contact-container h4 {
    font-size: 1.5em;
    margin-bottom: 20px;
  }
  section#contacto .contact-container .brand img {
    height: 70px;
    width: 78px;
  }
  section#contacto .contact-container .brand .nova-txt .ctc-nova {
    font-size: 2em;
  }
  section#contacto .contact-container .brand .nova-txt .ctc-nchile {
    font-size: 2.2em;
  }
  section#contacto .contact-container .contactanos ul li > h4 {
    font-size: inherit;
    margin-top: 30px;
  }

  .descr-prod .modal-container {
    width: 50%;
  }
  .descr-prod .modal-container .card-i .image {
    display: block;
  }

  .add-user-comment .modal-container {
    width: 60%;
  }

  .add-user-comment .modal-container .formulario {
    font-size: 1.7em;
    padding: 3em 4em;
  }

  .add-user-comment .modal-container .formulario .card-clasifica input[type="text"]{
    width: 60%;
  }

}