@import url('https://fonts.googleapis.com/css2?family=Aboreto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gochi+Hand&display=swap');
@font-face {
    font-family: 'Brightwall';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/Brightwall_Dafont.otf) format("opentype");
  }
@font-face {
    font-family: "fontAwesome";
    font-weight: normal;
    font-style : normal;
        src : url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0");
        src : url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"),
                url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"),
                url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"),
                url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"),
                url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
}
.brightwall { font-family: 'Brightwall', sans-serif; }    

a { color: #a44977 !important; }
header .header-top { background: url(../img/fondo-cabecera.jpg) scroll no-repeat center center; background-size: cover; }
#_desktop_top_menu ul#top-menu { font-family: 'Gochi Hand', cursive !important;}
#_desktop_top_menu ul#top-menu li { margin-right: 20px;}
#_desktop_top_menu ul#top-menu a { color: #4b4545 !important; }
.top-menu a[data-depth="0"] {
    padding: .675rem;
    font-size: 1.6rem;
    font-weight: normal;
    letter-spacing: -1px;
}
#custom-text h2 { font-family: 'Brightwall', cursive !important; color: #a44977;}
footer#footer {
    background: url(https://www.tuspacionutricion.es/wp-includes/images/customcf/fondo-portada.jpg) scroll no-repeat center center;
    background-size: cover;
}
#custom-text {
    padding: 56px;
    width: 74%;
    float: left;
}
#wrapper .banner {
    width: 25%;
    float: right;
  }

/*accordion*/
.accordion p strong.brightwall {  font-size: 1.4em; }
.heading-primary {
    font-size:2em;
    padding:2em;
    text-align:center;
}
.accordion dl,
.accordion-list {
    border:1px solid #ddd;
    &:after {
        content: "";
        display:block;
        height:1em;
        width:100%;
        background-color:darken(#38cc70, 10%);
    }
}
.accordion dd,
.accordion__panel {
    background-color:#eee;
    font-size:1em;
    line-height:1.5em; 
}
  .accordion p {
    padding:1em 2em 1em 2em;
  }
   
  .accordion {
      position:relative;
      background-color:#eee;
  }
  .accordion .container {
    max-width:960px;
    margin:0 auto;
    padding:2em 0 2em 0;
  }
  .accordionTitle,
  .accordion__Heading {
   background-color:#38cc70; 
     text-align:center;
       font-weight:700; 
            padding:2em;
            display:block;
            text-decoration:none;
            color:#fff;
            transition:background-color 0.5s ease-in-out;
    border-bottom:1px solid darken(#38cc70, 5%);
    &:before {
     content: "+";
     font-size:1.5em;
     line-height:0.5em;
     float:left; 
     transition: transform 0.3s ease-in-out;
    }
    &:hover {
      background-color:darken(#38cc70, 10%);
    }
  }
  .accordionTitleActive, 
  .accordionTitle.is-expanded {
     background-color:darken(#38cc70, 10%);
      &:before {
        transform:rotate(-225deg);
      }
  }
  .accordionItem {
      height:auto;
      overflow:hidden;
      max-height:50em;
      transition:max-height 1s;   
    
       
      @media screen and (min-width:48em) {
          transition:max-height 0.5s
           
      }
       
      
  }
    
  .accordionItem.is-collapsed {
      max-height:0;
  }
  .no-js .accordionItem.is-collapsed {
    max-height: auto;
  }
  .animateIn {
       animation: accordionIn 0.45s normal ease-in-out both 1; 
  }
  .animateOut {
       animation: accordionOut 0.45s alternate ease-in-out both 1;
  }
  @keyframes accordionIn {
    0% {
      opacity: 0;
      transform:scale(0.9) rotateX(-60deg);
      transform-origin: 50% 0;
    }
    100% {
      opacity:1;
      transform:scale(1);
    }
  }
   
  @keyframes accordionOut {
      0% {
         opacity: 1;
         transform:scale(1);
       }
       100% {
            opacity:0;
             transform:scale(0.9) rotateX(-60deg);
         }
  }
   
  .accordionTitle::before{
    content:'\f078';
    font-family:fontawesome;
    margin-right:5px; 
  }
   
  .is-collapsed::before{
    content:'\f077';
    font-family:fontawesome;
    margin-right:5px; 
  }
   
  dd.accordion-content {
    padding:10px;
    border-left:1px solid #f4f4f4;
    border-right:1px solid #f4f4f4;
  }
   
  dd.is-collapsed {
    padding:0px!important;
  }
   
  .accordionTitle, .accordion__Heading {
      background-color: #f4f4f4;
      text-align: left;
      font-weight: 700;
      padding: 10px;
      display: block;
      text-decoration: none;
      color: #4B2E1E;
      transition: background-color 0.5s ease-in-out;
      border-bottom: 1px solid darken(#ffffff, 5%);
  }

  .accionCMS {
    padding:2rem;
    width: 500px;
    margin: auto;
    background: url(../img/fondo-bloque.jpg) scroll no-repeat center center;
    background-size: cover;
    text-align: center;
    margin-bottom: 2rem;
  }
  .accionCMS .contenedor {
    padding: 30px 20px;
    background-color: rgba(255,255,255,0.8);
  }
  .accionCMS h3 { font-family: 'Brightwall'; }

  /*CHAT*/
  
.welcome-screen { text-align: center; }
.welcome-screen button { margin-top: 20px; font-size: 20px;}
.welcome-screen input {
  height: 30px;
  width: 200px;
  font-size: 30px;
  text-align: center;
}
.chat {
  display: flex;
  width: 800px;
  height: 500px;
  margin: 0 auto;
  border: 1px solid grey;
  margin-top: 20px;
}
.chat .users-list {
  width: 300px;
  border-right: 1px solid grey;
}
.chat .users-list .active { background: #f3f3f3; }
.chat .users-list div {
  cursor: pointer;
  padding: 10px;
}
.chat .users-list div:hover { background: #f3f3f3; }
.chat .has-new-notification:after {
  content: "❗";
  display: inline-block;
}
.chat .messages {
  width: 100%;
  position: relative;
}
.chat .messages-list { height: calc(100% - 60px); }
.chat input {
  width: 100%;
  box-sizing: border-box;
  height: 30px;
}
.chat .current-user {
  border-bottom: 1px solid grey;
  padding: 5px;
}
.hidden { display: none; }
.contenedor-botones {
  display: flex;
  justify-content: space-around;
  margin-bottom: 40px;
}
.contenedor-botones a.boton-retos {
  display: inline;
  padding: 18px;
  font-size: 1.1em;
  border: 1px solid;
  border-radius: 4px;
}
.contenedor-botones a.boton-retos.boton-marcado {
  background-color: #a44977 !important;
  border: 1px solid #400623 !important;
  color: white !important;
}
.contenido-bloque {
  overflow: hidden;
  height: auto;
}