/**/
/* ONDF CSS */
/**/

/* Grid Pressbook */
.seperator {
  hight: 100%;
  wdth: 1px;
	bckground-color: black; 
	clor: white;
  bckground: black;
  tp: 0;
  bttom: 0;
  psition: absolute;
  lft: 50%;
}
.link {
	grid-area: link;
}
.source {
	grid-area: source;
}
.grid-pressbook {
  display: grid;
  gid-template-columns: 9fr 2fr 4.5fr;
  grid-template-columns: 180px 4fr;
  gid-template-areas:
    'date source';
  gid-column-gap: 5px;
  text-align: left;
/*  grid-template-columns: 5fr 9fr;
  grid-template-rows: fit-content(100%);
  grid-template-areas: 
    'link'
    'date source';
  column-span: 2;*/
}
.ate:after {
  content: "";
  background-color: red;
  psition: absolute;
  width: 5px;
  hight: 10px;
  tp: 10px;
  lft: 50%;
  dsplay: block;
}
/* 910 */
@media screen and (max-width: 640px) {
  .grid-pressbook
  {
    grid-template-columns: 1fr;
  }
  .link {
    gid-row-gap: 25px;
    pdding-bottom: 20px;
  }
}


/* Tooltip Styles */

a.tooltip {
  box-shadow: none;
  -webkit-box-shadow: none;
       brder-bottom: 1px solid var(--hover-color);
  border-bottom: inherit;
}
a:hover.tooltip {
  box-shadow: none;
  -webkit-box-shadow: none;
}

/* Base styles for the element that has a tooltip */
[data-tooltip],
.tooltip {
  position: relative;
  cursor: pointer;
}

/* Base styles for the entire tooltip */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
  position: absolute;
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: 
      opacity 1.5s ease-in-out,
        visibility 1.5s ease-in-out,
        -webkit-transform 1.5s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    -moz-transition:    
        opacity 1.5s ease-in-out,
        visibility 1.5s ease-in-out,
        -moz-transform 1.5s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    transition:         
        opacity 1.5s ease-in-out,
        visibility 1.5s ease-in-out,
        transform 1.5s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform:    translate3d(0, 0, 0);
  transform:         translate3d(0, 0, 0);
  pointer-events: none;
}

/* Show the entire tooltip on hover and focus */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

/* Base styles for the directional arrow */
.tooltip:before,
[data-tooltip]:before {
  z-index: 1001;
  brder: 6px solid transparent;
  border: 11px solid transparent;
            background-color: transparent;
  content: "";
}

/* Base styles for the tooltip's content area */
.tooltip:after,
[data-tooltip]:after {
  z-index: 1000;
  padding: 8px;
  width: 280px;
  background-color: var(--hover-color);
  bckground-color: hsla(0, 0%, 10%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  fnt-size: 15px;
  line-height: 1.5;
  border-radius: 10px;
  text-align: center;
}

/* Directions */
/* Tooltip top (default) */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
  bottom: 100%;
  left: 50%;
}
/* Arrow */
[data-tooltip]:before,
.tooltip:before {
  margin-left: -12px;
  m_argin-bottom: -12px;
  margin-bottom: -22px;
  border-top-color: var(--hover-color);
  brder-top-color: hsla(0, 0%, 10%, 0.9);
}

/* Horizontally align top/bottom tooltips */
[data-tooltip]:after,
.tooltip:after {
  margin-left: -80px;
}
/* Number of pixels above texte */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after {
  transform:         translateY(-12px); 
  -webkit-transform: translateY(-12px);
  -moz-transform:    translateY(-12px);
}


/**/
/* Timeline */

.timeline {
  display: grid;
  fex-direction: column;
  grid-template-columns: 1fr 1fr;
  gid-auto-rows: 1fr;
  gid-auto-flow: row;
  column-gap: 1px;
}
.timeitem {
  padding-top: 20px;
  align-content: end;
  box-sizing: content-box;
}
.timeitem img {
  border-radius: 5px !important;
  width: 30%;
  margin-bottom: 3px;
  background-color: transparent;
}

.timeitem:not(:nth-of-type(1)):not(:first-child):not(:last-child) {
  grid-row: span 2;
}

.timeitem:nth-child(odd) {
  border-right: 2px solid gray;
  padding-right: 25px;
  text-align: right;
}
.timeitem:nth-child(even) {
  border-left: 2px solid gray;
  padding-left: 25px;
  text-align: left;
}
.timeitem:nth-child(odd):not(:nth-last-of-type(2)):not(:last-child) {
  border-bottom: 2px solid transparent;
  border-image-slice: 1;
  border-image-source: linear-gradient(to right, #fff, #ccc);
}
.timeitem:nth-child(even):not(:nth-last-of-type(2)):not(:last-child) {
  border-bottom: 2px solid transparent;
  border-image-slice: 1;
  border-image-source: linear-gradient(to left, #fff, #ccc);
}

.timeitem:not(:last-child):not(:nth-last-of-type(2)) {
  bckground-image: linear-gradient(transparent, #f5f5f5 80%);
}

/* :not(:first-child) */
.timeitem:nth-child(odd):not(:nth-last-of-type(2)):not(:last-child)::after {
  content: '';
  display: block;
  background-color: #ccc;
  width: 8px;
  height: 8px;
  border-radius: 30%;
  position: relative;
  top: 3px;
  left: calc(100% + 23px);
  rght: calc(-100% - 5px);
}
.timeitem:nth-child(even):not(:first-child):not(:nth-last-of-type(2)):not(:last-child)::after {
  content: '';
  display: block;
  background-color: #ccc;
  width: 8px;
  height: 8px;
  border-radius: 30%;
  position: relative;
  top: 3px;
  left: calc(0% - 31px);
  rght: calc(-100% - 5px);
}

/**/
/* Serpentine */

.serpentine {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
.serpentine > div {
  width: 100%;
  box-sizing: border-box;
  padding-top: 20px;
  order: 1;
  border-bottom: 4px dotted lightgray;
  brder-bottom: 4px solid lightgray;
  /* Text at bottom of div */
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  flex-direction: column;
  line-height: 1.5em;
}
.serpentine > div:nth-child(odd)  {
  order: 1;
  border-right: 4px dotted lightgray;
  /* Right align */
  padding-right: 15px;
  align-items: flex-end;
  aign-items: end;
  align-content: flex-end;
  aign-content: end;
  align-self: flex-end;
  text-align: right;
  margin-left: auto;
}
.serpentine > div img {
  border-radius: 0px !important;
  mx-width: 90%;
  margin-bottom: 3px;
  background-color: transparent;
}

.serpentine > div:nth-child(odd) img {
  /* Right align */
  margin-left: auto;
  mrgin-bottom: 3px;
}
.serpentine > div:nth-child(even) img {
  /* Left align */
  margin-right: auto;
  mrgin-bottom: 3px;
}
.serpentine > div:nth-child(even) {
  border-left: 4px dotted lightgray;
  /* Left align */
  padding-left: 15px;
  align-items: start;
  align-content: start;
  text-align: left;
}
.serpentine > div:last-child {
  height: 35px;
  border-bottom: none !important;
}
/*:not(:first-child)*/
.serpentine > div:nth-child(odd):not(:last-child)::after {
  content: '';
  display: block;
  background-color: gray;
  width: 10px;
  height: 10px;
  border-radius: 30%;
  position: relative;
  top: 7px;
  left: 22px;
  rght: calc(0% - 21px);
  padding-right: auto;
}
.serpentine > div:nth-child(even):not(:last-child)::after {
  content: '';
  display: block;
  background-color: gray;
  width: 10px;
  height: 10px;
  border-radius: 30%;
  position: relative;
  bottom: 300px;
  top: 7px;
  right: 22px;
}
.serpentine img {
  border-bottom: none !important;
  txt-decoration: none !important;
}

/* Keyframes */

@keyframes avatar {
  from {
		border-radius:var(--border-radius);
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
  }
  to {
		border-radius:50%;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
	}
}

@keyframes wiggle {
  0%, 7% {
    transform: rotateZ(0);
    -webkit-transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-10deg);
    -webkit-transform: rotateZ(-10deg);
  }
  20% {
    transform: rotateZ(10deg);
    -webkit-transform: rotateZ(10deg);
  }
  25% {
    transform: rotateZ(-10deg);
    -webkit-transform: rotateZ(-10deg);
  }
  30% {
    transform: rotateZ(6deg);
    -webkit-transform: rotateZ(6deg);
  }
  35% {
    transform: rotateZ(-4deg);
    -webkit-transform: rotateZ(-4deg);
  }
  40%, 100% {
    transform: rotateZ(0);
    -webkit-transform: rotateZ(0);
  }
}

@keyframes wavy { 
  0% { 
		transform:translateY(0px); 
		-webkit-transform:translateY(0px); 
	} 
  20% { 
		transform: translateY(-20px); 
		-webkit-transform: translateY(-20px); 
  } 
  40%, 100% { 
		transform: translateY(0px); 
		-webkit-transform: translateY(0px); 
  } 
}