body, h1, h2, h3, h4, h5, h6 {
  font-weight: 300;
}

body {
  word-wrap:break-word;
}

header {
  text-align: center;
}

header, section {
  /*margin: 48px 0;*/
}

nav {
  text-align: center;
}

nav li {
  display: inline;
  margin: 16px;
}

dt {
  margin: 16px 0 8px 0;
}


/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1000px) {
/* Styles */
.portrait {
  float: right;
  margin-left: 30px;
  width: 52vw; /*320px;*/
  max-width: 52%; /*320px;*/
  margin-top: 6px; /* 👈 pushes the picture down */
}
}


/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) and (max-width : 1000px) {
/* Styles */
.portrait {
  float: left;
  margin-right: 10px;
  width: 40vw; /*320px;*/
  }
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
.portrait {
  position: static;
  margin: 0px;
  width:auto; 
 }
}



.portrait p {
  text-align: right;
  align: justify;
}


/*FOR ACCORDION*/
.accordion {
  background-color: #fff;
  color: #777; /* #009933;*/
  cursor: pointer;
 /* padding: 2px;*/
  width: auto;
  text-align: left;
  border: none;
  outline: none;
  outline-width: thin;
  transition: 0.4s;
  font-weight: 200;
 /* border-radius: 10%;*/
}

.accordion:after {
  /*content: '\0203A';*/
  content: '\025B6 '; 
   font-size: 15px;
  font-weight: 200;
  color: #777;
  float: left;
  margin-left: 5px;
  outline-width: thin;
}

.active:after {
  /*content: "-";*/
  content: '\025BC ';
}

.panel {
  padding: 8px 8px 0px 8px;
  margin: 5px 0 5px 0;
  /*background-color: rgba(0, 153, 51, 0.25);*/
  background-color: rgba(01, 10, 01, 0.00);
  display: none;
  overflow: hidden;
  border-radius: 1%;
}

/*EXPERIMENTO CON DETAILS/SUMMARY CLASS*/
.summary-light {
  /*background: #edf2ff; */
  outline: none;
  padding: 15px; 
  border-radius: 5px;
  /*text-transform: uppercase;*/
}
.summary-dark { background: #3630a3; color: white; }