body {
  font-family: 'Source Sans Pro',Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size: 16px;
  line-height: 1.75;
  background: #000;
  //overflow: scroll;
  overflow: auto;
  height:100%!important;
  overflow-y:hidden;
  cursor: pointer;
  cursor : -o-pointer;
  cursor : -moz-pointer;
  cursor : -webkit-pointer;

  background: rgba(3, 22, 37, 0.85); /*background ?*/
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkYjllOCIgc3RvcC1vcGFjaXR5PSIwLjU0Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjM0JSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIwLjM2Ii8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIwLjAxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxZTU3OTkiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top, rgba(125,185,232,0.54) 0%, rgba(30,87,153,0.36) 34%, rgba(30,87,153,0.01) 99%, rgba(30,87,153,0) 100%); /* FF3.6-15 */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,185,232,0.54)), color-stop(34%,rgba(30,87,153,0.36)), color-stop(99%,rgba(30,87,153,0.01)), color-stop(100%,rgba(30,87,153,0))); /* Chrome4-9,Safari4-5 */
  background: -webkit-linear-gradient(top, rgba(125,185,232,0.54) 0%,rgba(30,87,153,0.36) 34%,rgba(30,87,153,0.01) 99%,rgba(30,87,153,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: -o-linear-gradient(top, rgba(125,185,232,0.54) 0%,rgba(30,87,153,0.36) 34%,rgba(30,87,153,0.01) 99%,rgba(30,87,153,0) 100%); /* Opera 11.10-11.50 */
  background: -ms-linear-gradient(top, rgba(125,185,232,0.54) 0%,rgba(30,87,153,0.36) 34%,rgba(30,87,153,0.01) 99%,rgba(30,87,153,0) 100%); /* IE10 preview */
  background: linear-gradient(to bottom, rgba(125,185,232,0.54) 0%,rgba(30,87,153,0.36) 34%,rgba(30,87,153,0.01) 99%,rgba(30,87,153,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8a7db9e8', endColorstr='#001e5799',GradientType=0 ); /* IE6-8 */

/*  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;*/

  background-color: rgba(24, 76, 117, 1);
  background-image: url(../img/dark-stripes-light.png), url(../img/eope.png);
  background-attachment: fixed;
  background-size: auto, cover;


}

#timeline {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

  /*background-color: #031625;*/
  /*background-color: #1e4e77;*/
  width:400%;

  margin: -24px 0!important;
  //flex-wrap: wrap;
}
#timeline.hoverclick .tl-item {

  -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  //width: 23.3333%;             /* For old syntax, otherwise collapses. */

  width: 729px;              /* TODO - could this help */

  -webkit-flex: 1;          /* Chrome */

  flex: 1 0 729px;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  -ms-flex: 1 0 729px;              /* IE 10 */

  min-width: 729px;
  max-width: 729px;

    background-image: url(../img/dark-stripes-light.png);
  //flex-wrap: wrap;
}

.tl-item {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  position: relative;
  width: 25%;
  height: 105vh; /* fox Mac need to be more than 100vh */
  //min-height: 600px;
  color: #e4f5fc;
//  background: white;
  overflow: hidden;
  -webkit-transition: width 0.5s ease;
  transition: width 0.5s ease;
//  background-color: rgba(24, 76, 117, 0.65);
//  background-image: url(../img/dark-stripes-light.png);
}
.tl-item:before, .tl-item:after {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.tl-item:after {
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}
.tl-item:before {
  /*background: -webkit-linear-gradient(top, transparent 0%, black 75%);
  background: linear-gradient(to bottom, transparent 0%, black 75%);*/
  z-index: 1;
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) translateY(50%);
          transform: translate3d(0, 0, 0) translateY(50%);
  -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
  transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition: opacity 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
}
.tl-item.hoverclick {
  //width: 100% !important; /* CHANGE THIS ACCORDING TO THE AMOUNT OF DIVS */
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 37px 106px #000;
  //max-width:729px;
  width: 7300px; /* TODO */
  max-width: 729px; /* Need to do smth with IE */
  background-image: url(../img/dark-stripes-light.png);
}
.tl-item.hoverclick:after {
  opacity: 0;
}
.tl-item.hoverclick:before {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0) translateY(0);
          transform: translate3d(0, 0, 0) translateY(0);
  -webkit-transition: opacity 1s ease, -webkit-transform 1s ease 0.25s;
  transition: opacity 1s ease, -webkit-transform 1s ease 0.25s;
  transition: opacity 1s ease, transform 1s ease 0.25s;
  transition: opacity 1s ease, transform 1s ease 0.25s, -webkit-transform 1s ease 0.25s;
}
.tl-item.hoverclick .tl-content {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: all 0.75s ease 0.5s;
  transition: all 0.75s ease 0.5s;
}
.tl-item.hoverclick .tl-bg {
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
}

.tl-content {
  -webkit-transform: translate3d(0, 0, 0) translateY(25px);
          transform: translate3d(0, 0, 0) translateY(25px);
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 0 1.618em;
  top: 55%;
  opacity: 0;
}
.tl-content h1 {
  font-family: 'Pathway Gothic One',Helvetica Neue,Helvetica,Arial,sans-serif;
  text-transform: uppercase;
  color: #1779cf;
  font-size: 1.44rem;
  font-weight: normal;
}

.tl-year {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  z-index: 1;
  border-top: 1px solid #e4f5fc;
  border-bottom: 1px solid #e4f5fc;
}
.tl-year p {
  font-family: 'Pathway Gothic One',Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size: 1.728rem;
  line-height: 0;
}

.tl-bg {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center center;
  -webkit-transition: -webkit-filter 0.5s ease;
  transition: -webkit-filter 0.5s ease;
  transition: filter 0.5s ease;
  transition: filter 0.5s ease, -webkit-filter 0.5s ease;
  -webkit-filter: grayscale(1%);
          filter: grayscale(1%);
}

/* Transisitons */
.tl-item.hoverclick .tl-year {
  top: 50%!important;
  width: 18%;
}
.tl-item.hoverclick .tl-content {
  top: 49%!important;
}

.tl-year {
  transition: top .5s;
  -webkit-transition: top .5s;
}

.tl-content {
  transition: top .51s;
  -webkit-transition: top .51s;
}

/* In case content does not fit in p then add scrolling */
.tl-content p {
  max-height: 400px;
  overflow-x: hidden;
  overflow-y: overlay;
  font-size: 21px;
  text-align: left;
  line-height: 28px;
  margin-top:43px;
}

.tl-content li {
  padding-top:12px;
}

/* Awesome arrows */
i {
  font-size: 55px;
  position: fixed;
  top: 50%;
  background: rgba(255,255,255,0.7);
  color: #484848;
  z-index: 4000;
  width: 36px;
  padding: 20px;
  border-radius: 18%;
  line-height: 36px;
  font-weight: 900;
  box-shadow: 1px 1px 50px #000;
  opacity: .2;
  font-style: normal;
  padding-top:10px;
}
i:hover {
  opacity: 1;
}
i.left { left: -19px; }
i.right { right: -19px; }
/* END */

.header-logo {
  width: 400px;
  height: 50px;
  background: url(../img/ut.png) 50% 40% no-repeat, rgba(255, 255, 255, 0.7);
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  position: fixed;
  left: calc(50% - 200px);
  top: 0px;
  z-index: 4000;
  box-shadow: 1px 1px 50px #000;
  opacity: .75;
}

.hoverclick .tl-bg {
  /*height:35%;
  top: 77px;*/
}

.tl-item.hoverclick .tl-year p {
    text-align: center;
}

/* Test for new scrollbar */
.scrollbar
{
	margin-left: 30px;
	float: left;
	height: 300px;
	width: 65px;
	background: #F5F5F5;
	overflow-y: scroll;
	margin-bottom: 25px;
}

.force-overflow
{
	min-height: 450px;
}


/*
 *  STYLE 1
 */

#style-1::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #555;
}

.tl-bg {
  width:100px; height:100px; top:30%;
  left: calc(50% - 50px);
  border-radius:100%;
  box-shadow: 0 0 10px #000;
}
.hoverclick .tl-bg {
  width:729px;
  top:80px;
  left:0;
  border-radius:0;
  height: 336px;
}

li:nth-child(1) {
    padding-top:0;
}

.tl-item.hoverclick p{
  color:#1e4e77;
  padding-right: 10px;
}
.hoverclick .tl-year {
  border-color:#1e4e77;
}

.textbox, .used-sources {
    z-index: 4;
    position: fixed;
    background: rgba(255,255,255,0.95);
    padding: 20px 20px;
    border-radius: 5px;
    border: 1px solid #f5f5f5;
    background-image: url(../img/dark-stripes-light.png);
    width: 70%;
    left: calc(83% - 70%);
}

.textbox {
  top: 35px;
  text-align: center;
  max-height: 600px;
  /*height: calc(100% - 200px);
  overflow: scroll;
  overflow-x: hidden;*/
}

.textbox img {
    width: 40%;
    max-width: 150px;
}

span.close {
    position: relative;
    z-index: 5;
    right: -50.25%;
    top: -17px;
    /* width: 37%; */
    display: inline-block;
    cursor:pointer;
    background: #fff;
    padding: 0 10px;
    border-radius: 25px;
    border: 1px solid #aaa;
}

span.close:hover {
  background: #ddd;
}

.textbox h2 {
    margin-top: -27px;
    font-size: 42px;
}

.textbox p {
    font-size: 18px;
}

.used-sources {
    top:70px;
    display:none;
    text-align: center;
    height: calc(100% - 200px);
    overflow: scroll;
    overflow-x: hidden;

}

.used-sources span.close {
    //right: -98.5%;
}

ul {
    list-style-type: square;
}

.used-sources-link {
    position: fixed;
    color: white;
    // top: 7px;
    right: 20px;
    z-index: 5;
    background:rgba(255,255,255,.2);
    padding:0px 6px;
    border-radius:4px
}

.used-sources-link:hover {
    background:rgba(255,255,255,.5);
    padding:0px 6px;
    border-radius:4px
}

.used-sources h1 {
    margin-top: -50px;

}

.used-sources div {
  height: calc(100% - 50px);
  overflow: scroll;
  overflow-x: hidden;
}

.used-sources a {
  display: block;
  color:#333;
  text-decoration: none;
}

.used-sources a:hover {
  color:#1e4e77;
}


.used-sources {
    top: 70px;
    display: none;
    text-align: center;
    height: calc(100% - 200px);
    overflow: hidden;
    //max-width: 800px;

  }

.used-sources h3 {
  border-bottom: 1px solid #666;
  width: 10%;
  text-align: center;
  margin: 10px auto;
  border-top: 1px solid #666;
}

/* Color links */
.tl-content a {
    color: #0062b5;
    text-decoration: none;
}

.tl-content a:hover {
    color:#1f4260
}
/* end */

/* experimental styles */
.header-logo {
  //display: none;
  border-bottom-left-radius: 0px;
  border-top-left-radius: 50px;
  border-bottom-right-radius: 50px;
  top:20px;
  display: none;
}

.tl-item.hoverclick .tl-bg {
  top:0px;
}

.tl-item.hoverclick .tl-year,
.tl-item.hoverclick .tl-content {
    top: 400px!important;
}

.used-sources-link:hover {
    background: rgba(30, 87, 153, 0.93);
    padding: 0px 6px;
    border-radius: 4px;
    color: #ffffff;
}

.used-sources-link {
    position: fixed;
    color: #d9ebf4;
    bottom: 15px;
    //top:7px;
    //right: calc(50% - 67px);
    z-index: 5;
    background: rgb(39, 72, 103);
    padding: 0px 6px;
    border-radius: 4px;
    border: 1px solid rgb(29, 63, 91);
  }

  .tl-item.hoverclick .tl-bg {
      top: 17px;
      box-shadow: none;
  }


#a1,  #a2, #a3 {
      background: rgb(255, 255, 255);
      padding: 4px 6px;
      border-radius: 4px;
      border: 1px solid #ddd;
      margin-top: 10px;
      display: block;
      width: 296px;
  }

.footer-logo {
  background: url(../img/ut-valge-ring.png);
  height: 200px;
  width: 200px;
  position: fixed;
  background-size: contain;
  bottom: 30px;
  left: 30px;
  background-repeat: no-repeat;
  opacity: .5;
  display: none;
}