figure {
  text-align: center;
}
.franklin-content figure > img {
  padding:0;
  margin:0;
}

figcaption {
  text-align: center;
}

.small-imgc {
  text-align: center;
}
.small-imgc img {
  margin:0;
  padding:0;
  width: 25%;
}

pre {
	position: relative;
	/* padding: 30px; */
}

.copy-button {
	cursor: pointer;
	border: 0;
	font-size: 10px;
	text-transform: uppercase;
	font-weight: 500;
	padding: 6px 10px 10px;
	color: #795548;
	background-color: transparent;
	position: absolute;
	top: 0;
	right: 0;
}

.copy-button:hover,
.copy-button:focus,
.copy-button:active {
	outline: 0;
	background-color: #eee9e6;
}

/* Style the button that is used to open and close the collapsible content */
 .collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: inherit;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.collapsiblecontent {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}


.definition {
  background-color: aliceblue;
  border-left: 5px solid cornflowerblue;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 1em;
}

.warning {
  margin-top: 1.5em;
  width: 95%;
  margin-left:auto;
  margin-right:auto;
  background-color:  #f1b3b1;
  border-radius: 5px;
  margin-bottom: 1em;
}

.warning .content {
  padding: 10px;
  padding-left: 12px;
}

.warning .title{
  font-size: 105%;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding-left: 7px;
  padding-top: 2px;
  color: white;
  background: crimson;
}

.important {
  background-color: lemonchiffon;
  padding: 0.5em;
  margin-bottom: 1em;
}

.note {
  margin-top: 1.5em;
  width: 95%;
  margin-left:auto;
  margin-right:auto;
  background-color:  aliceblue;
  border-radius: 5px;
  margin-bottom: 1em;
}

.note .content {
  padding: 10px;
  padding-left: 12px;
}

.note .title{
  font-size: 105%;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding-left: 7px;
  padding-top: 2px;
  color: white;
  background: cornflowerblue;
}

.caution {
  margin-top: 1.5em;
  width: 95%;
  margin-left:auto;
  margin-right:auto;
  background-color: #fff2cc;
  border-radius: 5px;
  margin-bottom: 1em;
}

.caution .content {
  padding: 10px;
  padding-left: 12px;
}

.caution .title{
  font-size: 105%;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding-left: 7px;
  padding-top: 2px;
  color: black;
  background: #ffd966;
}

.column {
  float:left;
  width:30%;
  margin-bottom:16px;
  padding:0 8px; }
@media (max-width:62rem) {
  .column {
    width:45%;
    display:block; }
  }
@media (max-width:30rem){
  .column {
    width:95%;
    display:block;}
  }
.card { box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); }
.card img {
  padding-left:0;
  width: 100%; }
.container { padding: 0 16px; }
.container::after, .row::after{
  content: "";
  clear: both;
  display: table; }
.title { color: grey; }
.vitae { margin-top: 0.5em; }
.email {
  font-family: courier;
  margin-top: 0.5em;
  margin-bottom: 0.5em; }
.button{
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%; }
.button:hover{ background-color: #555; }