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



Primary style



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

*, *::after, *::before {

  -webkit-box-sizing: border-box;

          box-sizing: border-box;

}



.cd-tabs {

  position: relative;

  width: 100%;

  max-width: 960px;

  margin: 2em 0 2em auto;

}



@supports (background: linear-gradient(to left, #000, #000)) or (background: -webkit-linear-gradient(to left, #000, #000)) {

  /* if linear-gradient is supported */

  .cd-tabs::after {

    /* subtle gradient layer on top right of the tabbed navigation- to indicate it's possible to scroll */

    content: "";

    position: absolute;

    top: 0;

    right: 0;

    height: 60px;

    width: 50px;

    z-index: 1;

    pointer-events: none;

    background: -webkit-gradient(linear, right top, left top, from(#f8f7ee), to(rgba(248, 247, 238, 0)));

    background: linear-gradient(to left, #f8f7ee, rgba(248, 247, 238, 0));

    visibility: visible;

    opacity: 1;

    -webkit-transition: opacity .3s 0s, visibility 0s 0s;

    transition: opacity .3s 0s, visibility 0s 0s;

  }

  .cd-tabs.cd-tabs--scroll-ended::after {

    /* class added in JavaScript - remove the gradient layer when it's no longer possible to scroll */

    visibility: hidden;

    opacity: 0;

    -webkit-transition: opacity .3s 0s, visibility 0s .3s;

    transition: opacity .3s 0s, visibility 0s .3s;

  }

}



.cd-tabs nav {

  overflow: auto;

  -webkit-overflow-scrolling: touch;

  background: #f8f7ee;

  -webkit-box-shadow: inset 0 -2px 3px rgba(203, 196, 130, 0.06);

          box-shadow: inset 0 -2px 3px rgba(203, 196, 130, 0.06);

}



@media only screen and (min-width: 768px) {

  .cd-tabs::after {

    display: none;

  }

  .cd-tabs nav {

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

    -webkit-box-shadow: inset -2px 0 3px rgba(203, 196, 130, 0.06);

            box-shadow: inset -2px 0 3px rgba(203, 196, 130, 0.06);

    z-index: 1;

  }

}



@media only screen and (min-width: 800px) {

  .cd-tabs nav {

    position: relative;

    float: none;

    background: transparent;

    -webkit-box-shadow: none;

            box-shadow: none;

  }

}


/*ancho de la pestaña*/
.cd-tabs__navigation {

  width: 450px;

}



.cd-tabs__navigation:after {

  /* clearfix */

  content: "";

  display: table;

  clear: both;

}



.cd-tabs__navigation li {

  float: left;

}



.cd-tabs__navigation a {

  position: relative;

  display: block;

  height: 60px;

  width: 60px;

  text-align: center;

  font-size: 1.2rem;

  font-weight: 700;

  color: #c3c2b9;

  padding-top: 35px;

}



.cd-tabs__navigation a:hover {

  color: #29324e;

  background-color: rgba(233, 230, 202, 0.3);

}



.cd-tabs__navigation a.cd-selected {

  background-color: #ffffff !important;

  -webkit-box-shadow: inset 0 2px 0 #f05451;

          box-shadow: inset 0 2px 0 #f05451;

  color: #29324e;

}



.cd-tabs__navigation a::before {

  /* icons */

  content: "";

  position: absolute;

  top: 15px;

  left: 50%;

  margin-left: -8px;

  display: inline-block;

  height: 16px;

  width: 16px;

  background-image: url("../img/cd-icons.svg");

  background-repeat: no-repeat;

}



.cd-tabs__navigation a[data-content='new']::before {

  background-position: 0 0;

}



.cd-tabs__navigation a[data-content='gallery']::before {

  background-position: -16px 0;

}



.cd-tabs__navigation a[data-content='store']::before {

  background-position: -32px 0;

}



.cd-tabs__navigation a[data-content='settings']::before {

  background-position: -48px 0;

}



.cd-tabs__navigation a[data-content='trash']::before {

  background-position: -64px 0;

}



.cd-tabs__navigation a[data-content='inbox']::before {

  background-position: -80px 0;

}



.cd-tabs__navigation a[data-content='new'].cd-selected::before {

  background-position: 0 -16px;

}



.cd-tabs__navigation a[data-content='gallery'].cd-selected::before {

  background-position: -16px -16px;

}



.cd-tabs__navigation a[data-content='store'].cd-selected::before {

  background-position: -32px -16px;

}



.cd-tabs__navigation a[data-content='settings'].cd-selected::before {

  background-position: -48px -16px;

}



.cd-tabs__navigation a[data-content='trash'].cd-selected::before {

  background-position: -64px -16px;

}



.cd-tabs__navigation a[data-content='inbox'].cd-selected::before {

  background-position: -80px -16px;

}



@media only screen and (min-width: 768px) {

  .cd-tabs__navigation {

    /* move the nav to the left on medium sized devices */

    width: 80px;

    float: left;

  }

  .cd-tabs__navigation a {

    height: 80px;

    width: 80px;

    padding-top: 46px;

  }

  .cd-tabs__navigation a.cd-selected {

    -webkit-box-shadow: inset 2px 0 0 #f05451;

            box-shadow: inset 2px 0 0 #f05451;

  }

  .cd-tabs__navigation a::before {

    top: 24px;

  }

}



@media only screen and (min-width: 800px) {

  .cd-tabs__navigation {

    /* tabbed navigation on top on big devices */

    width: auto;

    background-color: #f8f7ee;

    -webkit-box-shadow: inset 0 -2px 3px rgba(203, 196, 130, 0.06);

            box-shadow: inset 0 -2px 3px rgba(203, 196, 130, 0.06);

  }

  .cd-tabs__navigation a {

    height: 60px;

    line-height: 60px;

    width: auto;

    text-align: left;

    font-size: 1.4rem;

    padding: 0 2.8em 0 4.6em;

  }

  .cd-tabs__navigation a.cd-selected {

    -webkit-box-shadow: inset 0 2px 0 #f05451;

            box-shadow: inset 0 2px 0 #f05451;

  }

  .cd-tabs__navigation a::before {

    top: 50%;

    margin-top: -8px;

    margin-left: 0;

    left: 40px;

  }

}



.cd-tabs__content {

  background: #ffffff;

}



.cd-tabs__content li {

  display: none;

  padding: 1.4em;

}


 /* lo de abajo de la pestaña*/
.cd-tabs__content li.cd-selected {

display: block;

  -webkit-animation: cd-fade-in 0.5s;

          animation: cd-fade-in 0.5s;

}



.cd-tabs__content li p {


  line-height: 1.6;


  margin-bottom: 2em;

}



@media only screen and (min-width: 768px) {

  .cd-tabs__content {

    min-height: 480px;

  }

  .cd-tabs__content li {

    padding: 2em 2em 2em 7em;

  }

}



@media only screen and (min-width: 800px) {

  .cd-tabs__content {

    min-height: 0;

  }

  .cd-tabs__content li {

    padding: 3em;

  }

  .cd-tabs__content li p {

    font-size: 1.6rem;

  }

}



@-webkit-keyframes cd-fade-in {

  0% {

    opacity: 0;

  }

  100% {

    opacity: 1;

  }

}



@keyframes cd-fade-in {

  0% {

    opacity: 0;

  }

  100% {

    opacity: 1;

  }

}