body {
	margin: 0px;
	color: lightgray;
	font-family: Helvetica, Arial, Verdana;
	background-color: aliceblue;
	overflow-x: hidden;
}

#content {
	margin-top: 80px;
	text-align: justify;
	overflow-x: hidden;
}

.section a {
	color:darkkhaki;
	padding: 0px 3px;
	position: relative;
}

.macFirefox .section a {
	padding: 2px 3px 0px 3px;
}

.macFirefox  #peekLink:before {
	top: -19px;
}

.section a:hover { 
	background-color: #838052;
	color: darkkhaki;
	text-decoration: none;
}

#top {
	position: fixed;
	top: 0px;
	width: 100%;
	height: 51px;
	background-color: #aaa;
	z-index:99;
}

#top3 {
	background-color: #444;
}

#jobs {
	height: 51px;
	width: calc(50% - 400px);
	background-color: #444;
	float:left;
}

#topText {
	height: 25px;
	width: calc(100% - 150px);
	float:left;
	border-bottom: 1px solid #777;
	background-color: #666;
	color: black;
	font-size: 85%;
	font-family: Trebuchet MS;
	opacity: 0.7;
}

.topText {
	position: relative;
	left: 10px;
	top: 5px;
}

.topText em {
	font-size: 80%;
	color:lightgray;
}
#pageTitle {
	position:relative;
	height: 51px;
	background-color: #ccc;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: calc(50% + 12px) 5px;
	border-left: 1px solid gray;
	border-right: 1px solid gray;

	float:left;
	width: 800px;
	min-width: 260px;
	text-align: center;
	font-size: 250%;
	color: white;
	text-shadow: gray 1px 1px 2px;
    font-weight: 700;
    font-style: italic;
    letter-spacing: -2px;
    font-variant: small-caps;
}

.stateIdle {
	background-image: url("img/grulli.png");
}

.stateIdle div {
	display:none;
}
#account {
	height: 51px;
	width: calc(50% - 402px);
	background-color: #aaa;
	float:right;
}

#intercalaire, #noAppIntercalaire {
	position: fixed;
	top: 51px;
	width: 100%;
	transition: width 0.5s ease-in-out;
	height: 27px;
	z-index: 99;
	background-color: #666;
	border: 1px solid gray;
	border-top: 2px solid gray;
	box-shadow: 0px 13px 18px -5px black;
}
#actions {
	height: 25px;
	width: 150px;
	float:right;
	border-bottom: 1px solid #777;
	background-color: #666;
}

img {
	-webkit-user-drag: none;
	-ms-user-drag: none;
	-moz-user-drag: none;
	user-drag: none;
}

.uib {
	border: 2px solid;
	border-radius: 8px;
	color: inherit;
	font-variant: small-caps;
	font-size: 14px;
	background-color: transparent;
	cursor: pointer;
}

.uib:hover {
	background-color: rgba(1, 1, 1, 0.1);
}

.uib:focus, .job:focus, .popUpMenu:focus {
	outline: none; /* For Chrome Mac only. Can give accessibility problems */
}

#liveAbutton {
	position: absolute;
	top: 13px;
	right: 38px;
	font-family: Arial;
	padding: 1px 6px;
}

#liveSUbutton {
	position: absolute;
	top: 13px;
	right: 88px;
}

#welcomeTop {
	font-size: 24px;
	padding: 8px;
	display:none;
}

.popUpMenu {
	position:relative;
	top: -2px;
	border: none;
	font-size: 14px;
	background-color: transparent;
	cursor: pointer;
}

.popUpMenu:hover {
	background-color: rgba(1, 1, 1, 0.1);
}

.popUpMenuLabel {
	border: 2px solid khaki;
	background-color: darkkhaki;
	color: white;
	padding-left: 5px;
	padding-right: 5px;
	border-radius: 4px;
}

.popUpContainer {
	display: none;
}

.popUpStatic {
	position:fixed;
	top: 98px;
	right: 5px;
	display: none;
}

.popUpArea {
	position:relative;
	border:1px solid lightgray;
	background-color:gray;
	color: white;
	padding-top: 10px;
	padding-bottom: 10px;
	border-radius: 8px;
	top: -10px;
	left: -15px;
	width: 300px;
}

.popUpArea div {
	cursor: pointer;
	padding-left: 10px;
	padding-right: 10px;
}

.popUpArea div:hover {
	background-color: #bbb;
}

.popUpAreaC {
	width: 280px;
	left: 0px;
	top: 8px;
	z-index: 1;
}

.popUpAreaC div:hover {
	background-color: #bbb;
}

#taskText {
	position:absolute;
	top:6px;
	width: calc(100% - 80px);
	left:40px;
	height: 36px;
	text-align:center;
}

#taskDescr {
	font: bold 13px Sans-Serif;
	color: #333;
	text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.taskNoEstimate div {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	transform: translateX(-50%) translateY(-50%);
}

.taskNoEstimate span {
	display:none;
}

#taskEstimate {
	font: 12px Sans-Serif;
	color: #333;
}

#taskStop {
	position:absolute;
	top:20px;
	left:5px;
	background-image: url('img/stop.png');
	width:11px;
	height:11px;
}

#taskStop:hover {
	background-image: url('img/stop-hover.png');
}

#taskProgress {
	background-color: #aaa;
	position:absolute;
	bottom:0px;
	width:100%;
	height:6px;
}

#taskP {
	background-color: royalblue;
	height: 6px;
	width: 65%;
}

.taskMgr {
	position:absolute;
	top:13px;
	right:5px;
}

#taskMgr { display:none; }

#taskMgr svg { fill: #aaa; }
#taskMgr svg:hover { fill: #777; }

.wrapper {

}

.mainContent {
	padding-left: calc(50% - 400px);
	padding-right: calc(50% - 400px);	
	width: 800px;	
}

.section {
	position: relative;
	padding-left: calc(50% - 400px);
	padding-right: calc(50% - 400px);
	padding-top:20px;
	padding-bottom:20px;	
	max-width: 800px;
}

.sBlack {
    background-color: #2B343A;
}

.tBlack {
	background-color: #2B343A;
	background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0ic3ZnIiB3aWR0aD0iNzgyIiBoZWlnaHQ9Ijc4MiIgdmlld0JveD0iLTQ5OSAtNDk5IDQ5OCA0OTgiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHg9Ii01MDAiIHk9Ii01MDAiIHdpZHRoPSIxMDAwIiBoZWlnaHQ9IjEwMDAiIHN0eWxlPSJmaWxsOiB3aGl0ZTsgc3Ryb2tlLXdpZHRoOiAwOyBzdHJva2U6IG5vbmU7Ij4KICA8L3JlY3Q+CiAgPGRlZnM+CiAgICA8ZmlsdGVyIHg9IjAlIiB5PSIwJSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0icm91Z2hQYXBlciI+CiAgICAgIDxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIxMjgiIG51bU9jdGF2ZXM9IjEiIHJlc3VsdD0ibm9pc2UiPgogICAgICA8L2ZlVHVyYnVsZW5jZT4KICAgICAgPGZlRGlmZnVzZUxpZ2h0aW5nIGluPSJub2lzZSIgbGlnaHRpbmctY29sb3I9IiMyQjM0M0EiIHN1cmZhY2VTY2FsZT0iMSIgcmVzdWx0PSJkaWZmTGlnaHQiPgoJPGZlRGlzdGFudExpZ2h0IGF6aW11dGg9IjQ1IiBlbGV2YXRpb249IjU1Ij4KCTwvZmVEaXN0YW50TGlnaHQ+CiAgICAgIDwvZmVEaWZmdXNlTGlnaHRpbmc+CiAgICAgIDxmZUdhdXNzaWFuQmx1ciBpbj0iZGlmZkxpZ2h0IiBzdGREZXZpYXRpb249IjAuNzUiIHJlc3VsdD0iZGxibHVyIj4KICAgICAgPC9mZUdhdXNzaWFuQmx1cj4KICAgICAgPGZlQ29tcG9zaXRlIG9wZXJhdG9yPSJhcml0aG1ldGljIiBrMT0iMS4yIiBrMj0iMCIgazM9IjAiIGs0PSIwIiBpbj0iZGxibHVyIiBpbjI9IlNvdXJjZUdyYXBoaWMiIHJlc3VsdD0ib3V0Ij4KICAgICAgPC9mZUNvbXBvc2l0ZT4KICAgIDwvZmlsdGVyPgoJPC9kZWZzPgoJPHJlY3QgeD0iLTUwMCIgeT0iLTUwMCIgd2lkdGg9IjEwMDAiIGhlaWdodD0iMTAwMCIgZmlsdGVyPSJ1cmwoI3JvdWdoUGFwZXIpIiBzdHlsZT0iZmlsbDogd2hpdGU7IHN0cm9rZS13aWR0aDogMDsgc3Ryb2tlOiBub25lOyI+CgkgICAgPC9yZWN0Pgo8L3N2Zz4=')
}

.sBlue {
	color: gray;
	background-color: aliceblue;
}

.smooth { background-image: none; }

.tBlue {
	background-color: aliceblue;
	background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0ic3ZnIiB3aWR0aD0iNzgyIiBoZWlnaHQ9Ijc4MiIgdmlld0JveD0iLTQ5OSAtNDk5IDQ5OCA0OTgiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHg9Ii01MDAiIHk9Ii01MDAiIHdpZHRoPSIxMDAwIiBoZWlnaHQ9IjEwMDAiIHN0eWxlPSJmaWxsOiB3aGl0ZTsgc3Ryb2tlLXdpZHRoOiAwOyBzdHJva2U6IG5vbmU7Ij4KICA8L3JlY3Q+CiAgPGRlZnM+CiAgICA8ZmlsdGVyIHg9IjAlIiB5PSIwJSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0icm91Z2hQYXBlciI+CiAgICAgIDxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIxMjgiIG51bU9jdGF2ZXM9IjEiIHJlc3VsdD0ibm9pc2UiPgogICAgICA8L2ZlVHVyYnVsZW5jZT4KICAgICAgPGZlRGlmZnVzZUxpZ2h0aW5nIGluPSJub2lzZSIgbGlnaHRpbmctY29sb3I9ImFsaWNlYmx1ZSIgc3VyZmFjZVNjYWxlPSIxIiByZXN1bHQ9ImRpZmZMaWdodCI+Cgk8ZmVEaXN0YW50TGlnaHQgYXppbXV0aD0iNDUiIGVsZXZhdGlvbj0iNTUiPgoJPC9mZURpc3RhbnRMaWdodD4KICAgICAgPC9mZURpZmZ1c2VMaWdodGluZz4KICAgICAgPGZlR2F1c3NpYW5CbHVyIGluPSJkaWZmTGlnaHQiIHN0ZERldmlhdGlvbj0iMC43NSIgcmVzdWx0PSJkbGJsdXIiPgogICAgICA8L2ZlR2F1c3NpYW5CbHVyPgogICAgICA8ZmVDb21wb3NpdGUgb3BlcmF0b3I9ImFyaXRobWV0aWMiIGsxPSIxLjIiIGsyPSIwIiBrMz0iMCIgazQ9IjAiIGluPSJkbGJsdXIiIGluMj0iU291cmNlR3JhcGhpYyIgcmVzdWx0PSJvdXQiPgogICAgICA8L2ZlQ29tcG9zaXRlPgogICAgPC9maWx0ZXI+Cgk8L2RlZnM+Cgk8cmVjdCB4PSItNTAwIiB5PSItNTAwIiB3aWR0aD0iMTAwMCIgaGVpZ2h0PSIxMDAwIiBmaWx0ZXI9InVybCgjcm91Z2hQYXBlcikiIHN0eWxlPSJmaWxsOiB3aGl0ZTsgc3Ryb2tlLXdpZHRoOiAwOyBzdHJva2U6IG5vbmU7Ij4KCSAgICA8L3JlY3Q+Cjwvc3ZnPg==')
}

.tBlue a, .sBlue a {
	color: #989244;
	filter: drop-shadow(0px 0px 4px khaki);
}

.sTimeline {
	background-color: #2B343A;
}

.mxfletters {
	animation: mxf-letters-anim 15s 1s infinite;
	stroke-dasharray: 250 250;
	stroke-dashoffset: 250;
	stroke: gray;
	fill: none;
}
@keyframes mxf-letters-anim {
  0% { stroke-dashoffset: 250; fill:none; }
  12% { stroke-dashoffset: 0; fill:none; }
  18% { fill: none; }
  78% { stroke-dashoffset: 0; fill: none;}
  80% { stroke-dashoffset: 250; fill: none;}
}

#mxfSVG {
	top: 0px;
	transition: top 0.5s ease-in;	
}
#whatIsCorrupt {
	top: 400px;
	transition: top 2s ease-in-out;				
}
#laserLeft, #laserRight {
	transition: opacity 0.5s ease-in-out;				
}
.finding {
	visibility: hidden;
	font-family: courier;
	font-size: 140%;
}
.fpic {
	float:left;
	padding-left:10px;
	width: 240px;
	height:135px;
	margin-right:10px;
}

.dataDump {
	background:#ddd;
	font-size:10px;
	line-height:120%;
	padding:10px;
	overflow-wrap: break-word;
	color:black;
	border-radius:8px;
}

		
ul.polaroids a:after {
	content: attr(title);
}
/* By default, we tilt all our images -2 degrees */
ul.polaroids a {
	-webkit-transform: rotate(-2deg);
	-moz-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
}

/* Rotate all even images 2 degrees */
ul.polaroids li:nth-child(even) a {
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	-ms-transform: rotate(2deg);
}

/* Don't rotate every third image, but offset its position */
ul.polaroids li:nth-child(3n) a {
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	position: relative;
	top: -5px;
}

/* Rotate every fifth image by 5 degrees and offset it */
ul.polaroids li:nth-child(5n) a {
	-webkit-transform: rotate(5deg);
	-moz-transform: rotate(5deg);
	-ms-transform: rotate(5deg);
	position: relative;
	right: 5px;
}

/* Keep default rotate for every eighth, but offset it */
ul.polaroids li:nth-child(8n) a {
	position: relative;
	top: 8px;
	right: 5px;
}

/* Keep default rotate for every eleventh, but offset it */
ul.polaroids li:nth-child(11n) a {
	position: relative;
	top: 3px;
	left: -5px;
}

/* Scale the images on hover, add transitions for smoothing things out, and ensure the hover appears on top */
ul.polaroids li a:hover {
	transform: scale(1.25);
	position: relative;
	z-index: 5;
	background-color: white !important;
}

/* Add drop shadows and smooth out the transition (Safari only) */
ul.polaroids a {
	-webkit-transition: -webkit-transform .15s linear;
	-moz-transition: -moz-transform .15s linear;
	-ms-transition: -ms-transform .15s linear;
	-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
	-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
	box-shadow: 0 3px 6px rgba(0,0,0,.25);
}

/* On hover, darken the shadows a bit */
ul.polaroids a:hover {
	-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
	-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
	box-shadow: 0 3px 6px rgba(0,0,0,.25);
	color: #333;
}
ul.polaroids {
	margin: 0 0 18px -30px;
	width: 640px;
}
ul.polaroids li {
	display: inline;
}
ul.polaroids a {
	background: none repeat scroll 0 0 #FFFFFF;
	color: #333333;
	display: inline;
	float: left;
	font-family: "Marker Felt",sans-serif;
	font-size: 18px;
	margin: 0 0 27px 30px;
	padding: 10px 10px 15px;
	text-align: center;
	text-decoration: none;
	transform: rotate(-2deg);
	width: auto;
	filter: none;
}
ul.polaroids img {
	display: block;
	margin-bottom: 12px;
	width: 260px;
}


#ribbon {
	opacity: 0;
	transition: opacity 0.5s;
}
		
.ribbon-wrapper-nic {
	width: 85px;
	height: 88px;
	overflow: hidden;
	position: absolute;
	top: -24px;
	right: -3px;
    pointer-events: none;
}

.ribbon-nic {
	font: bold 11px Sans-Serif;
	color: #333;
	text-align: center;
	text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
	transform: rotate(-45deg);
	position: relative;
	padding: 7px 0;
	left: -5px;
	top: 42px;
	width: 120px;
	background-color: #dcd079;
	background-image: linear-gradient(top, #dcd079 0%, #858340 100%);
	color: #6a6340;
	-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
	-moz-box-shadow:	0px 0px 3px rgba(0,0,0,0.3);
	box-shadow:			0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-nic:before, .ribbon-nic:after {
	content: "";
	border-top:	  3px solid #6e8900;
	border-left:  3px solid transparent;
	border-right: 3px solid transparent;
	position:absolute;
	bottom: -3px;
}

.ribbon-nic:before {
	left: 0;
}
.ribbon-nic:after {
	right: 0;
}
.ribbonPos {
	position:absolute;
	right: 4px;
	bottom: 69px;
}

.cd-container {
  width: 90%;
  max-width: 1080px;
  margin: 0 auto;
  /*background: #2B343A;*/
  padding: 0 10%;
  border-radius: 2px;
}
.cd-container::after {
  content: '';
  display: table;
  clear: both;
}

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

Main components 

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


#cd-timeline {
  position: relative;
  padding: 2em 0;
  margin-top: 2em;
  margin-bottom: 2em;
}
#cd-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 25px;
  height: 100%;
  width: 4px;
  background: khaki;
}
@media only screen and (min-width: 1170px) {
  #cd-timeline {
    margin-top: 3em;
    margin-bottom: 3em;
  }
  #cd-timeline::before {
    left: 50%;
    margin-left: -2px;
  }
}

.cd-timeline-block {
  position: relative;
  margin: 2em 0;
}
.cd-timeline-block:after {
  content: "";
  display: table;
  clear: both;
}
.cd-timeline-block:first-child {
  margin-top: 0;
}
.cd-timeline-block:last-child {
  margin-bottom: 0;
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-block {
    margin: 4em 0;
  }
  .cd-timeline-block:first-child {
    margin-top: 0;
  }
  .cd-timeline-block:last-child {
    margin-bottom: 0;
  }
}

.cd-timeline-img {
  position: absolute;
  top: 8px;
  left: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px khaki, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}
.cd-timeline-img {
  background: darkkhaki;
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-img {
    width: 30px;
    height: 30px;
    left: 50%;
    margin-left: -15px;
    margin-top: 8px;
    /* Force Hardware Acceleration in WebKit */
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
  }
}

.cd-timeline-content {
  position: relative;
  margin-left: 60px;
  margin-right: 30px;
  background: #333C42;
  border-radius: 2px;
  padding: 1em;
  .timeline-content-info {
    background: #333C42; /*#2B343A; 18 Jan 2024*/
    padding: 5px 10px;
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    /*box-shadow:  inset 0 2px 0 rgba(0, 0, 0, 0.08); 18 Jan 2024*/
    border-radius: 2px;
    i {
      margin-right: 5px;
    }
    .timeline-content-info-title, .timeline-content-info-date {  
      width: calc(50% - 2px);
      display: inline-block;
    }
    @media (max-width: 500px) {
      .timeline-content-info-title, .timeline-content-info-date {  
        display: block;
        width:100%;
      } 
    }
  }
  .content-skills {
    font-size: 12px;
    padding:0;
    margin-bottom: 0;
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    li {
      background: #40484D;
      border-radius: 2px;
      display: inline-block;
      padding: 2px 10px;
      color: rgba(255,255,255,0.7);
      margin: 3px 2px;
      text-align: center;
      flex-grow: 1;
    }
  }
}
.cd-timeline-content:after {
  content: "";
  display: table;
  clear: both;
}
.cd-timeline-content h2 {
  color: rgba(255,255,255,.9);
  margin-top:0;
  margin-bottom: 5px;
}
.cd-timeline-content p, .cd-timeline-content .cd-date {
  color: rgba(255,255,255,.7);
  font-size: 13px;
  font-size: 0.8125rem;
}
.cd-timeline-content .cd-date {
  display: inline-block;
}
.cd-timeline-content p {
  margin: 1em 0;
  line-height: 1.6;
}

.cd-timeline-content::before {
  content: '';
  position: absolute;
  top: 16px;
  right: 100%;
  height: 0;
  width: 0;
  border: 14px solid transparent;
  border-right: 14px solid #333C42;
}

@media only screen and (min-width: 768px) {
  .cd-timeline-content h2 {
    font-size: 24px;
    /*font-size: 1.25rem;*/
  }
  .cd-timeline-content p {
    font-size: 16px;
    font-size: 1rem;
  }
  .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
    font-size: 14px;
    font-size: 0.875rem;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-content {
    color: white;
    margin-left: 0;
    padding: 1.6em;
    width: 36%;
    margin: 0 5%
  }
  .cd-timeline-content::before {
    top: 18px;
    left: 100%;
    border-color: transparent;
    border-left-color: #333C42;
  }
  .cd-timeline-content .cd-date {
    position: absolute;
    width: 100%;
    left: 122%;
    top: 23px;
    font-size: 16px;
    font-size: 1rem;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content {
    float: right;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
    top: 18px;
    left: auto;
    right: 100%;
    border-color: transparent;
    border-right-color: #333C42;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
    float: right;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
    left: auto;
    right: 122%;
    text-align: right;
  }
}

.dottedImg {
	border: 1px black dotted;
}


.animImg {
	opacity: .3;
	transition: opacity 0.5s;
}

.twoCards {
	width:1080px;
	position:relative;
	left:-140px;
	margin-top:40px;
	margin-bottom:20px;
}

.card {
	float:left;
	width:500px;
	margin: 0px 20px 0px 20px;
	background:white;
	box-shadow: 0px 0px 30px 2px #000;
	height:470px;
}

.card a {
	text-align:center;
	width:490px;
	background-color: darkkhaki;
	position: absolute;
	bottom: 0px;
	padding:5px;
	color: white;
	cursor: pointer;
	text-decoration: none;
    font-size: 120%;
}

.card a:hover {
	background-color: #dc2;
	color: gray;
}

.cardText h1 {
	margin: 10px 5px 5px 10px;
	letter-spacing: -1px;
    font-weight: 700;
    font-style: italic;
    font-variant: small-caps;
    text-align: center;
}

.cardText p {
	margin: 10px 5px 5px 10px;
    padding: 5px 15px;
    font-weight: 100;
}

.learnMoreD {
}

#liveAbutton {
	opacity:0;
	animation: liveA-anim 2s 5s forwards;
	color: #ed4;
}

@keyframes liveA-anim {
    0% { opacity: 0; }
    50% { opacity: 1; }
    60% { opacity: 0; }
    80% { opacity: 1; }
    90% { opacity: 0; }
    100% { opacity: 1; }
}

#languages {
	cursor: default;
	margin-top: 5px;
	margin-right: 10px;
	text-align: right;
}

#languages a {
	color: grey;
}

#homeButton a:any-link, #languages a:any-link {
    color: darkkhaki;
	cursor: pointer;
    text-decoration: none;
}

#languages .onScreen {
	color: khaki;
}

.elastic div {
	opacity: 0.2;
	transition: opacity 1s;	
}

#testClip { width: 800px; }

#mouseSVG { transition: opacity 1s }

.h0 {
	font-family: Georgia;	
	font-size: 240%;
	opacity: 75%;
	text-align: center;
	font-weight: bold;
	text-align: left;
}

h1 {
	font-family: Georgia;
	font-size: 200%;
	text-align: left;
}

h2 {
	font-family: Georgia;
	font-weight: 100;
	font-size: 200%;
	text-align: left;
}

h3 {
	font-family: Georgia;
	font-size: 125%;
	text-align: left;
}

p {
	font-size: 18px;
	line-height: 1.25;
	margin-left: 30px;
	margin-right: 30px;
}

ul {
	font-size: 18px;
    list-style-type: square;
    padding-inline-start: 30px;
}

li {
	margin-bottom: 4px;	
}

.altUL li {
	margin-bottom: 0px;	
}

#legacyBox, #refreshBox  {
	top: -20px;
}
			
.peekPanel {
	position:absolute;
	width:320px;
	height:404px;
	background-color: white;
	overflow:hidden;
	color: black;
	box-shadow: 0px 0px 4px black;
	border: 5px solid #838052;
    z-index: 2;
	cursor: pointer;
	top: 16px;
	text-shadow: none;
	font-weight: 100;
	letter-spacing: normal;
}

#peekLink:before {
	content: "";
	position:relative;
	top: -21px;
	right: -145px;

	border-left: 16px solid rgba(0, 0, 0, 0);
	border-right: 16px solid rgba(0, 0, 0, 0);
	border-bottom: 16px solid #838052;
	z-index:3;
}

.peekPanel p {
	font-size: 16px;
	text-align: left;
	margin-left: 10px;
	margin-right: 10px;
	line-height: 1.25;
	hyphens: auto;
	-ms-hyphens: auto;
	-webkit-hyphens: auto;
	text-shadow: none;
	font-weight: 100;
	letter-spacing: normal;
	color: black;
	font-family: Helvetica, Arial
}

.peekPanel ul, .peekPanel ol {
	font-size: 16px;
	text-align: left;
	hyphens: auto;
	-ms-hyphens: auto;
	-webkit-hyphens: auto;
	text-shadow: none;
	font-weight: 100;
	letter-spacing: normal;
	color: black;
	font-family: Helvetica, Arial
}

.peekImage {
	padding: 0px;
	border-bottom: 3px solid #838052;
	height: 192px;
	overflow: hidden;
	text-align: center;
}

.peekFadeOut {
	position:absolute;
	width: 335px;
	height: 80px;
	bottom: 0px;
	left: -5px;
	background-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%, white 95%, white 100%);
}

.thumbP {
	font-size: 16px;

}

.ulP {
	font-size: 16px;
}

.appCTADiv { left: 48px; }

halo { filter: drop-shadow(0px 0px 8px khaki) }

.picDiv {
	text-align:center;
	height: 0px;
	position:relative
}
.picImg {
	position:absolute; top:0;
}
.picEm {
	opacity: .5;
	text-align: center;
	font-style: italic;
}